@import "settings.colors";

@import "mixins/tools.mixins";

.c-card--audio-enabled {
  .c-card__grid {
    @include grid-template-columns(rem(10), auto 1fr max-content);
  }
  .c-card__audio {
    @include grid-column(1, 2, true);
    margin-left: rem(10);
    position: relative;
  }
  // Audio available
  .c-card__audio-button {
    &,
    &:visited,
    &:hover,
    &:focus,
    &:active {
      .c-button__icon {
        fill: transparent;
        stroke: $color-grey-660;
      }
    }
  }
  // No audio available
  .c-card__audio-button--inactive {
    padding: rem(9);
    &,
    &:visited,
    &:hover,
    &:focus,
    &:active {
      .c-button__text {
        color: $color-grey-660;
        font-size: rem(12);
        line-height: 1;
        letter-spacing: rem(1);
      }
    }
  }
  .c-dropdown-menu {
    margin-top: rem(5);
  }
  .c-card__content {
    @include grid-column(2, 3, true);
  }
  .c-card__media {
    @include grid-column(3, 4, true);
    margin-right: rem(10);
  }
}

// Audio playing
.c-card--audio-enabled--playing {
  background-color: $color-white;
  .c-card__audio-button {
    &,
    &:visited,
    &:hover,
    &:focus,
    &:active {
      .c-button__icon {
        fill: $color-grey-660;
        stroke: $color-grey-660;
      }
    }
    .c-button__icon {
      animation: c-card-audio-button-pulse 2s ease 0s infinite;
    }
  }
}

@keyframes c-card-audio-button-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
