//
// Product teaser - Belgrade
// ----------------------------
@import "../../global";

:root {
  --product-teaser-info-height: 4rem;
  --product-teaser-info-spacing: 1rem;
  --product-teaser-image-opacity: 0.4;
  --product-teaser-transition: 0.2s ease;
}

.product {
  &-image {
    margin-bottom: 2px;

    img {
      width: 100%;
      transition: opacity var(--product-teaser-transition);
    }
  }

  &-hover {
    opacity: 0;
    transition: opacity var(--product-teaser-transition);
    z-index: 1;
  }

  &-info {
    height: var(--product-teaser-info-height);
    padding-top: 2px;
    border-bottom: 2px solid currentcolor;
    transition: all var(--product-teaser-transition);
  }

  &-title {
    line-height: 1.2;
    transition: all 0.2s ease;
    padding-right: calc(var(--product-teaser-info-spacing) * 3);

    a {
      color: var(--beo-body-color);
    }
  }

  // hover
  &:hover {
    .product {
      &-image img {
        opacity: var(--product-teaser-image-opacity);
      }

      &-info {
        padding-inline: var(--product-teaser-info-spacing);
        background-color: var(--beo-primary);
        color: var(--beo-white);
        border-bottom-color: var(--beo-primary);
      }

      &-title {
        padding-right: var(--product-teaser-info-spacing);
        color: var(--beo-white);

        a {
          color: var(--beo-white);
        }
      }

      &-hover {
        opacity: 1;
      }
    }
  }
}

.text-white .product {
  --beo-primary: #{$white};
  --beo-white: var(--beo-dark);
  --beo-body-color: #{$white};
}
