@import '../../mixins/box-sizing';

.card {
  @include tds-box-sizing;

  box-shadow: var(--tds-card-box);
  background-color: var(--tds-card-background);
  display: block;
  border-radius: 4px;
  overflow: hidden;

  &.clickable {
    &:hover {
      box-shadow: var(--tds-card-box-hover);
      cursor: pointer;
    }
  }

  .card-header {
    font: var(--tds-headline-06);
    letter-spacing: var(--tds-headline-06-ls);
    padding: 16px;
    display: flex;
    align-items: center;

    slot[name='thumbnail']::slotted(*) {
      width: 36px;
      height: 36px;
      border-radius: 100%;
      margin-right: 16px;
    }

    .card-top-header {
      padding-left: 16px;
      display: flex;
      flex-direction: column;

      &.no-header-img {
        padding-left: 0;
      }
    }

    &.below {
      padding-top: 16px;
    }
  }

  .header-subheader {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .header,
    slot[name='header'] {
      color: var(--tds-card-headline);
    }

    .subheader,
    slot[name='subheader'] {
      color: var(--tds-card-sub-headline);
    }
  }

  .card-body-img {
    width: 100%;
  }

  .tds-divider {
    margin: 16px 16px 0;
    background-color: var(--tds-card-divider);
    height: 1px;
  }

  .card-body {
    display: block;
    word-wrap: break-word;
  }

  slot[name='body']::slotted(*) {
    /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
    font: var(--tds-detail-03) !important;
    letter-spacing: var(--tds-detail-03-ls) !important;
    color: var(--tds-card-body-color);
    padding: 0 16px;
    margin-bottom: 16px;
    margin-top: 16px;
    max-width: 336px;
  }

  slot[name='actions']::slotted(*) {
    display: flex;
    padding: 16px;
    color: var(--tds-card-icon-color);
  }
}

button {
  width: 100%;
  border: none;
  text-align: left;
  padding: 0;

  &:focus-visible {
    outline: 2px solid var(--tds-blue-400);
    outline-offset: -2px;
  }

  &:active {
    box-shadow: var(--tds-card-box-pressed);
  }
}

.below-header-stretch,
.above-header-stretch {
  display: flex;
  flex-direction: column;

  .stretch {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    slot[name='body']::slotted(*) {
      max-width: unset;
      flex-grow: 1;
    }
  }
}