@import '../assets/globals.postcss.css';

.mojs-player {
  position:       fixed;
  left:           0;
  bottom:         0;
  width:          100%;
  height:         calc( 40 * $PX );
  background:     rgba( 58, 8, 57, .85 );
  z-index:        100;

  * {
    box-sizing: border-box;
  }

  $btnWidth: 35;
  $btnCount: 5;
  $leftWidth: calc( $btnCount * $btnWidth * $PX );
  &__left {
    position:     absolute;
    left:         0;
    width:        $leftWidth;
  }

  &__mid {
    position:     absolute;
    left:         $leftWidth;
    right:        calc( $btnWidth/2 * $PX );
    overflow:     hidden;
    padding:      0 calc( 20 * $PX );
  }

  &__right {
    position:     absolute;
    right:        0;
  }

  &__hide-button {
    position:     absolute;
    right:        calc( 6 * $PX );
    bottom:       100%;
  }

  &__mojs-logo {
    [data-component="icon"] {
      fill: $c-orange;
    }
  }

  &.is-hidden {
    transform:    translateY(100%);
  }
  &.is-transition {
    transition:   all .15s ease-out;
  }
}