@use '../base/token';
@use '../abstract';

@mixin quote-img-title {
  color: var(--base-white);
  font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
}

.cds-quote-img-panel {
  $this: &;

  // @include abstract.debug();
  @include abstract.relative();

  display: block;
  width: 280px;
  height: 210px;
  padding: 0;
  cursor: pointer;

  &__cover {
    @include abstract.relative();

    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background: rgba(0 0 0 / 0.8);
    text-align: center;
    color: var(--secondary-gray-blue-200);
    font-size: token.$font-size-0;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);

    & > span {
      @include abstract.relative();

      display: flex;
      flex-direction: column;
    }

    &::before {
      @include abstract.absolute($top: 0, $left: 0);
      content: '';
      width: 100%;
      height: 100%;
      background-color: var(--secondary-gray-blue-600);
      opacity: 0.9;
    }
  }

  &__sub-title {
    @include quote-img-title();

    font-size: token.$font-size-1;
  }

  &__title {
    @include quote-img-title();

    margin-bottom: 3px;
    font-size: token.$font-size-3;
  }

  &__img {
    @include abstract.absolute($top: 0, $left: 0);

    width: 100%;
    height: 100%;
  }

  &:hover {
    #{$this}__cover {
      z-index: 1;
    }
  }
}