@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '../../themes/common-variables.scss';
@import '../../themes/media-queries.scss';
@import '../../themes/font-mixins.scss';

// mobile
.audio-container {
  $speed: .5s;
	position: relative;

  background-color: $white;

  &.mobile {
    width: 100%;
  }

  .audio-coverphoto {
    position: relative;
    width: 100%;

    .enter {
      opacity: .25;
      &.enterActive {
        opacity: 1;
        transition: opacity .6s ease-in;
      }
    }

    .leave {
      opacity: 1;
      &.leaveActive {
        opacity: 0.01;
        transition: opacity .6s ease-in-out;
      }
    }

    .appear {
      opacity: 0.01;
      &.appearActive {
        opacity: 1;
        transition: opacity .6s ease-in-out;
      }
    }

    .audio-slider {
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .audio-time-display {
        font-size: rem(15px);
        text-align: center;
        color: $gray-50;
        width: rem(50px);
      }
    }

    .audio-img-filter {
      opacity: .25;
      transition: opacity 1s linear;
    }

    .audio-duration-block {
      width: rem(50px);
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: rem(15px);
      color: $white;
      background-color: $gray-15;
      text-align: center;
    }
  }

  .audio-info-container {
    position: relative;
    padding: rem(28px) rem(6px) rem(24px) rem(6px);

    h4 {
      font-size: rem(20px);
      line-height: 1.5;
      font-weight: $font-weight-bold;
      margin-bottom: rem(24px);
    }

    .html {
      p, div, span {
        font-size: rem(15px);
        line-height: 1.5;
        color: $gray-50;
      }
    }

    // without cover photo
    &.without-cp {
      .progress-bt {
        cursor: pointer;
        position: relative;
        display: inline-block;
        margin-right: rem(16px);
        vertical-align: top;
        background-color: #004ea2;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        img {
          width: 50%;
          height: 50%;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }

      h4 {
        margin: 0;
      }

      span {
        font-size: rem(12px);
      }
    }
  }
}

// tablet
@include mq($min-width: $screen-sm-min, $max-width: $screen-sm-max) {
  .audio-container {
    .audio-info-container {
      padding: rem(24px) rem(24px) rem(24px) rem(24px);
    }
  }
}

// desktop. wait for spec
@include mq($min-width: $screen-md-min) {
  .audio-container {
    .audio-info-container {
      padding: rem(24px) rem(24px) rem(24px) rem(24px);
    }
  }
}