:root {

  --simple-card--gap: var(--spacing-md);
  --simple-card--text-align: start;

  --simple-card--background : var(--clr-gray-50);
  --simple-card--color : var(--color-on-light);
  --simple-card--border-width : 1px;
  --simple-card--border-radius : var(--radius-media);
  --simple-card--border-color : var(--clr-gray-100);

  --simple-card--content-gap: .5rem;
  --simple-card--spacing: 0 var(--spacing-md);
  --simple-card--font-size : var(--font-size-text, 1rem);
  --simple-card--title-font-size : 1.125rem;

  --simple-card--header-spacing: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
  --simple-card--header-bg: transparent;
  --simple-card--header-color: var(--color-primary);
  --simple-card--header-color-hover: var(--color-primary);

  --simple-card--footer-spacing: 0 var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  --simple-card--footer-bg: transparent;
  /*--simple-card--footer-bg: var(--color-primary-tr);*/
  --simple-card--footer-color: var(--color-primary);
  --simple-card--footer-color-hover: var(--color-primary);

}

[data-component-id="blsi2026:simple_card"] {
  /* @todo Add your styles here. */
  font-size: var(--simple-card--font-size);
  text-align: var(--simple-card--text-align);
  display: grid;
  gap: var(--simple-card--gap);
  color: var(--simple-card--color);

  & header{
    & :is(.block_content, .field, .field__item){ display: contents ;}
    & .field-field-media{
      width: 100%;
      margin: 0 auto;
      :is(img,svg){
        width: 100%;
        height: 100%;
        object-fit:contain;
      }
    }
  }

  & .content{
    display: grid;
    gap: var(--simple-card--content-gap);
  }


  &.clean{
    padding: var(--simple-card--spacing);
  }

  &:is(.themed,.primary){
    border: var(--simple-card--border-width) solid var(--simple-card--border-color);
    border-radius: var(--simple-card--border-radius);
    background-color: var(--simple-card--background);
    overflow: hidden;

    & header{
      background-color: var(--simple-card--header-bg);
      color: var(--simple-card--header-color);
      padding: var(--simple-card--header-spacing);

      display: flex;
      gap: 1rem;
      align-items: start;
      & a{
        color: var(--simple-card--header-color);
        &:hover{
          color: var(--simple-card--header-color-hover);
        }
      }
      & :is(h1,h2,h3,h4,h5,h6){
        margin: 0;
        color: var(--simple-card--header-color);
      }

      & .card-title{
        font-size: var(--simple-card--title-font-size);
      }

    }
    & .content{
      padding: var(--simple-card--spacing);
    }
    & footer{
      background-color: var(--simple-card--footer-bg);
      color: var(--simple-card--footer-color);
      padding: var(--simple-card--footer-spacing);
      text-align: right;

      & a:not(.button){
        color: var(--simple-card--footer-color);
        &:hover{
          color: var(--simple-card--footer-color-hover);
        }
      }
      & :is(h1,h2,h3,h4,h5,h6){
        margin: 0;
        color: var(--simple-card--footer-color);
      }
    }
  }
  &.primary{
    --simple-card--background: var(--color-primary);
    --simple-card--border-width: 0;
    --simple-card--header-color: var(--color-on-primary);
    --simple-card--footer-color: var(--color-on-primary);
    --headings-color: var(--color-on-primary);

  }
}