// Name:            Promo
// Description:     Event promo card
//
// Component:       `c-promo`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/global`
//                  `themes/[theme-file]`
//
//
// ========================================================================

@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

// Variables
// ========================================================================
$promo-height: 24rem;
$promo-size-medium: 80%;
$promo-size-full: 100%;

// ========================================================================

.c-promo {

  // Custom properties
  // ========================================================================
  --promo-bg-width: 80%;
  --promo-bg-height: 70%;
  
  // ========================================================================  

  min-height: $promo-height;
  background-size: cover;
  background-position: center;
  filter: saturate(70%);

  &__link {
    height: $promo-size-full;
    @include bp(lg) {
      &:hover {
        .c-promo__header:after {
          --promo-bg-width: 100%;
          --promo-bg-height: 100%;
        }
      }
    }
  }

  &__header {
    height: $promo-size-full;

    &:after {
      display: block;
      position: absolute;
      content: '';
      background-color: rgba($ui-02, .7);
      width: var(--promo-bg-width);
      height: var(--promo-bg-height);
      z-index: 1;
      transition: $global-interactive-transition;
    }
  }
  
  &__content {
    z-index: 2;
    padding: 0 1rem;
    width: $promo-size-medium;
  }

  .c-btn--default {
    --btn-label: $link-01;
    box-shadow: 0 0 0 1px $ui-01;
    @include bp(lg) {
      &:hover {
        --btn-label: var(--theme-color);
        box-shadow: 0 0 0 1px var(--theme-color);
      }
    }
  }

  &__label {
    color: var(--theme-color);
  }
}