@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

.#{$namespace}-card-content {
  &.type-5 {
    .#{$namespace}-card {
      @include flex(center, center);
      box-shadow: none;
      flex-direction: column;
      &:hover {
        .#{$namespace}-card__interactions {
          bottom: 50px;
        }
        .#{$namespace}-card__text {
          transform: translate(0);
          opacity: 1;
          box-shadow: 0px 0px 30px 0px
            rgba(0, 0, 0, getCssVar('shadow-opacity'));
        }
        .#{$namespace}-card__img {
          border-radius: 6px 40px 6px 40px;
          img {
            transform: scale(1.1);
          }
        }
      }
      &__img {
        border-radius: 6px 20px 6px 20px;
      }
      &__interactions {
        bottom: 6px;
        transition: all 0.25s ease;
        z-index: 20;
      }
      &__text {
        background: getColor('background', 1);
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        border-radius: 6px 20px 6px 20px;
        margin-top: -50px;
        z-index: 10;
        position: relative;
        width: calc(100% - 30px);
        padding-top: 10px;
        transition: all 0.25s ease;
        transform: translate(0, 25px);
        opacity: 0;
      }
    }
  }
  &.type-4 {
    .#{$namespace}-card {
      box-shadow: none;
      max-width: 300px;
      &:hover {
        transform: translate(0, -5px);
        .#{$namespace}-card__img {
          img {
            transform: scale(1);
          }
        }
        .#{$namespace}-card__text {
          padding-top: 15px;
          padding-bottom: 25px;
        }
      }
      &__img {
        align-items: center;
        max-height: 600px;
        img {
          transform: scale(1.2);
        }
      }
      &__interactions {
        top: 0px;
        bottom: auto;
      }
      &__text {
        background: getColor('background', 0.8);
        position: absolute;
        bottom: 0px;
        backdrop-filter: saturate(180%) blur(20px);
        border-radius: 0px 0px 20px 20px;
        transition: all 0.25s ease;
        p {
          opacity: 1;
        }
      }
    }
  }
  &.type-3 {
    .#{$namespace}-card {
      display: flex;
      max-width: 400px;
      &:hover {
        transform: scale(1.04);
      }

      &__img {
        img {
          min-width: 200px;
        }
      }
      &__text {
        padding-top: 15px;
      }
      &__title {
        h2,
        h3,
        h4,
        h5,
        h6 {
          padding: 0px;
        }
      }
    }
  }
  &.type-2 {
    .#{$namespace}-card {
      box-shadow: none;
      overflow: hidden;
      &:hover {
        transform: scale(0.95);
        .#{$namespace}-card__img {
          img {
            transform: scale(1.15);
          }
        }
        .#{$namespace}-card__text {
          transform: translate(0);
          opacity: 1;
          color: #fff;
        }
      }
      &__interactions {
        right: 0px;
        top: 0px;
        left: auto;
        bottom: auto;
        align-items: flex-end;
      }
      &__title {
        position: relative;
        color: inherit;
        padding: 0px;
        h2,
        h3,
        h4,
        h5,
        h6 {
          padding: 0px;
          padding-bottom: 5px;
        }
      }
      &__text {
        position: absolute;
        bottom: 0px;
        background: getColor('background', 0.9);
        padding-top: 30px;
        border-radius: 0px 0px 20px 20px;
        background: linear-gradient(
          180deg,
          transparent 0%,
          rgba(0, 0, 0, 0.5) 100%
        );
        color: transparent;
        font-size: 0.9rem;
        transform: translate(0, 45%);
        transition: all 0.25s ease;
        p {
          opacity: 1;
        }
      }
    }
  }
  &.type-1 {
    .#{$namespace}-card {
      &:hover {
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        transform: translate(0, 5px);
        .#{$namespace}-card__img {
          img {
            transform: scale(1.15);
          }
        }
      }
    }
  }
}

@include b(card) {
  background: getColor('background');
  color: getColor('text');
  width: 100%;
  max-width: 350px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
  border-radius: 20px;
  transition: getCssVar(transition-ease);
  cursor: pointer;
  position: relative;
  @include e(text) {
    font-size: 0.85rem;
    padding: 0px 15px;
    padding-bottom: 15px;
    p {
      font-size: inherit;
      margin: 0px;
      opacity: 0.8;
    }
  }
  @include e(title) {
    padding-top: 10px;
    padding-bottom: 5px;
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding: 0px;
      margin: 0px;
      font-size: 1.1rem;
    }
  }
  @include e(interactions) {
    @include flex(flex-start, center);
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 5px 10px;
  }
  @include e(img) {
    @include flex(center, center);
    position: relative;
    max-height: 250px;
    overflow: hidden;
    border-radius: 20px;
    transition: getCssVar(transition-ease);
    img {
      width: 100%;
      border-radius: inherit;
      display: block;
      transition: getCssVar(transition-ease);
    }
  }
}