// Name:            Card
// Description:     Shows card event channel
//
// Component:       `c-card`
//
// Modifiers:       `c-card--eventi`
//                  `c-card--film`
//                  `c-card--risoranti`
//                  `c-card--shopping`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/colors.mode`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;

// Variables
// ========================================================================

$card-kicker-pink: #e91f63;
$card-kicker-grey: #607d8b;
$card-kicker-green: #00bfa5;
$card-kicker-orange: #ffa000;


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

.c-card {
  --card-kicker-color: #{$card-kicker-pink};
  --card-kicker-border: #{$ui-06};
  --card-background: #{$ui-05};

  background-color: var(--card-background);
  @media(prefers-color-scheme: dark) {
    body:not([data-color-scheme*="light"]) & {
      --card-background: #{$ui-01-10};
      --card-kicker-border: #{$ui-03};
    }
  }

  [data-color-scheme*="dark"] &{
    --card-background: #{$ui-01-10};
    --card-kicker-border: #{$ui-03};
  }

  body[data-model*="evento"] & {
    iframe {
      position: relative;
      min-height: 450px;
    }
  }
  
  &__kicker {
    color: var(--card-kicker-color);
    [data-channel="/cultura/tv/programmi/"] & {
      color: #47ab98;
    }
    
    &--inverse {
      --card-kicker-color: #{$inverse-01};
      bottom: $margin-base;
      left: $margin-base;
      background-color: var(--card-kicker-background);
      z-index: 4;
    }

    &--cultura {
      --card-kicker-background: #{$card-kicker-pink};
    }

    &--svago {
      --card-kicker-background: #{$card-kicker-green};
    }

    &--food {
      --card-kicker-background: #{$card-kicker-orange};
    }

    &--generic {
      --card-kicker-background: #{$card-kicker-grey};
    }
  }

  &__content {
    height: 100%;
  }

  &__list-details {
    .c-card__item-details {
      &:nth-child(2),
      &:nth-child(3) {
        margin-top: $margin-small;
      }
    }
  }

  &__pull-down {
    flex: 1 0 auto;
    
  }

  &__gradient {
    display: block;
    position: relative;
    
    &:after {
      display: block;
      position: absolute; 
      bottom: 0;
      left: 0;
      content: '';
      width: 100%; 
      height: 50%;
      background: linear-gradient(180deg, rgba($color-black,0) 0%,  rgba($color-black,.2) 15%, rgba($color-black,.8) 80%);
    }
  }

  &__icon-top {
    top: 2px;
  }

  &__link {
    color: var(--body-secondary-color);
    transition: $global-interactive-transition;
    
    &:hover {
      color: var(--link-color-dark);
    }
  }
  
  &__wrapped {
    height: 100%;
    background: $ui-01;
    border: 1px solid $ui-04;
  }

  &__wrapped-item {
    object-fit: scale-down;
    width: 80%;
    height: 70%;
  }
}