@use '../theme.scss' as *;
@use 'sass:map';

$cardBackgroundColor: var(--depth-bg);
$cardBoxShadow: var(--depth-bs);
$cardHorizontalPadding: 20px;
$cardVerticalPadding: 16px;
$cardRadius: 1rem;

$maxCardColumn: 12;
$cardsGap: 12px;

.be-card {
  position: relative;
  max-width: 100%;
  width: 290px;
  background-color: $cardBackgroundColor;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &.border {
    border: 1px solid var(--brd);
    > .extra {
      border-top: 1px solid var(--brd);
    }
  }
  &.float {
    box-shadow: $cardBoxShadow;
  }
  &.surface {
    background-color: var(--suf);
  }
  &.round {
    &-s {
      border-radius: map.get($layoutRadiuses, 's');
    }
    &-m {
      border-radius: map.get($layoutRadiuses, 'm');
    }
    &-l {
      border-radius: map.get($layoutRadiuses, 'l');
    }
    &-xl {
      border-radius: map.get($layoutRadiuses, 'xl');
    }
  }
  > div {
    padding: $cardVerticalPadding $cardHorizontalPadding;
  }
  > .extra {
    padding: $cardVerticalPadding $cardHorizontalPadding;
  }
  &.media {
    > .image {
      width: 100%;
      padding: 0;
      // border-top-left-radius: inherit;
      // border-top-right-radius: inherit;
      // overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
  &.attached {
    > .header {
      padding: 0;
      background-color: var(--suf);
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }
    > .footer {
      padding: 0;
      background-color: var(--suf);
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }
  > .contents {
    flex-grow: 1;
    flex-shrink: 0;
    padding: $cardHorizontalPadding;
    .title {
      margin-bottom: 20px;
    }
  }
}

.be-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  &.column {
    @for $i from 1 through $maxCardColumn {
      &-#{$i} > .be-card {
        width: calc(100% / $i - $cardsGap);
      }
    }
  }
  &.round {
    &-s > .be-card {
      border-radius: map.get($layoutRadiuses, 's');
    }
    &-m > .be-card {
      border-radius: map.get($layoutRadiuses, 'm');
    }
    &-l > .be-card {
      border-radius: map.get($layoutRadiuses, 'l');
    }
    &-xl > .be-card {
      border-radius: map.get($layoutRadiuses, 'xl');
    }
  }
  .be-card {
    .float {
      box-shadow: none;
    }
  }
}

@media all and (max-width: #{$bp-tablet - 0.02px}) {
  .be-cards {
    &.column {
      @for $i from 1 through $maxCardColumn {
        &-xs-#{$i} > .be-card {
          width: calc(100% / $i - $cardsGap) !important;
        }
      }
    }
  }
}
@media all and (min-width: #{$bp-tablet}) and (max-width: #{$bp-laptop - 0.02px}) {
  .be-cards {
    &.column {
      @for $i from 1 through $maxCardColumn {
        &-sm-#{$i} > .be-card {
          width: calc(100% / $i - $cardsGap) !important;
        }
      }
    }
  }
}
@media all and (min-width: #{$bp-laptop}) and (max-width: #{$bp-desktop - 0.02px}) {
  //@media all and (max-width: #{$bp-desktop - 1px}) {
  .be-cards {
    &.column {
      @for $i from 1 through $maxCardColumn {
        &-md-#{$i} > .be-card {
          width: calc(100% / $i - $cardsGap) !important;
        }
      }
    }
  }
}