.scenario-audio {
  &__content-title {
    margin-bottom: @item-title-margin;
    .item-title;
  }

  &__content-body a {
    .link-text;
  }

  &__controls {
    background-color: @item-color;
    color: @item-color-inverted;

    .no-touch &:hover {
      background-color: @item-color-hover;
      color: @item-color-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &__progress {
    background-color: @item-color;
    border-radius: 50%;

    .no-touch &:not(.is-selected):hover {
      background-color: @item-color-hover;
      .transition(background-color @duration ease-in);
    }
  }

  &__progress.is-visited {
    background-color: @visited;
  }

  &__progress.is-selected {
    background-color: @item-color-selected;
  }

  &__strapline-btn {
    text-align: left;
    background-color: @item-color;
    color: @item-color-inverted;

    .no-touch &:hover {
      background-color: @item-color-hover;
      color: @item-color-inverted-hover;
    }

    .dir-rtl & {
      text-align: right;
    }
  }

  &__strapline-btn.is-visited {
    background-color: @visited;
    color: @visited-inverted;
  }

  &.has-img-zoom &__slider-image-container {
    .img-zoom();
  }

  &__widget {
    background: @font-color-inverted;
  }

  &__controls-left {
    border-radius: 0 @btn-border-radius @btn-border-radius 0;

    .dir-rtl & {
      border-radius: @btn-border-radius 0 0 @btn-border-radius;
    }
  }

  &__controls-right {
    border-radius: @btn-border-radius 0 0 @btn-border-radius;

    .dir-rtl & {
      border-radius: 0 @btn-border-radius @btn-border-radius 0;
    }
  }

  &__slide-container {
    background-color: @component-title-background-color;
  }

  &__content {
    color: @component-title-text-color;
    background-color: @component-title-background-color;
  }
}
