/**
 * Copyright (c) 2017-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

.c-audio-player {
  &__controls {
    display: flex;
    align-items: center;
    background: $brand-grey--lighter;
    padding: $spacing--small/2 $spacing - 6px;
  }

  &__play {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: $spacing--small;
    cursor: pointer;

    .c-icon {
      width: 24px;
      height: 24px;
    }
  }

  &--speach {
    .c-audio-player {
      &__play {
        color: $brand-color;
        margin-right: 0;

        &:hover, &:active, &:focus {
          color: $brand-color--secondary;
        }
      }
    }
  }

  &__play-icon {
    display: inline-flex;
    align-items: center;
  }

  &__pause-icon {
    display: none;
    align-items: center;
  }

  &__info {
    margin-bottom: $spacing--small;
    @include inuit-font-size(14px, 22px);
  }

  &__time {
    margin-right: $spacing--small;
    @include inuit-font-size(14px, 22px);
  }

  &__title {
    @include inuit-font-size(20px, 1);
    margin: $spacing--small 0;
    font-weight: $font-weight-bold;
    font-family: $font;
  }

  &__type {
    margin: 0;
    text-transform: uppercase;
    @include inuit-font-size(14px, 1);
    font-weight: 400;
    font-family: $font;
    color: $brand-grey;
  }

  &--playing {
    .c-audio-player {
      &__play-icon {
        display: none;
      }

      &__pause-icon {
        display: inline-flex;
      }
    }
  }

  &__progress {
    position: relative;
    height: 30px;
    cursor: pointer;
    flex: 1 1 auto;
  }

  &__progress-background, &__progress-played {
    position: absolute;
    top: 13px;
    left: 0;
    height: 4px;
  }

  &__progress-background {
    background: $white;
    width: 100%;
  }

  &__progress-played {
   background: $primary-color;
  }
}