@use '../theme.scss' as *;

$cardBackgroundColor: var(--depth-bg);
$cardBoxShadow: var(--depth-bs);
$cardHorizontalPadding: 14px;
$cardVerticalPadding: 14px;

.be-card {
  position: relative;
  max-width: 100%;
  width: 290px;
  background-color: $cardBackgroundColor;
  overflow: hidden;
  &.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: calc($baseBorderRadius * 0.5);
    }
    &-m {
      border-radius: $baseBorderRadius;
    }
    &-l {
      border-radius: calc($baseBorderRadius * 2);
    }
    &-xl {
      border-radius: calc($baseBorderRadius * 4);
    }
  }
  > div {
    padding: $cardVerticalPadding $cardHorizontalPadding;
  }
  > .image {
    width: 100%;
    padding: 0;
    // border-top-left-radius: inherit;
    // border-top-right-radius: inherit;
    // overflow: hidden;
    img {
      width: 100%;
    }
  }
  .title {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 10px;
  }

  > .extra {
    padding: $cardVerticalPadding $cardHorizontalPadding;
  }

  &.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;
    }
  }
}

.be-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  .be-card {
    .float {
      box-shadow: none;
    }
  }
}