@import '../shared';

.bottomBlock {
  z-index: 60;

  display: flex;
  flex-direction: column;

  &::-moz-focus-inner {
    border: 0;
  }

  &.activated {
    .progressBarContainer,
    .controlsContainerLeft,
    .controlsContainerRight,
    .logoContainer,
    .background {
      opacity: 1;
    }
  }

  &.showLogoAlways {
    .logoContainer {
      opacity: 1;
    }
  }

  &.logoHidden {
    .fullScreenContainer {
      margin-right: 14px;

      @include query(max-width-550()) {
        margin-right: 7px;
      }
      @include query(in-full-screen()) {
        margin-right: 25px;
      }
    }
    .logoContainer {
      display: none;
    }
  }

  &.playControlHidden {
    .playContainer {
      display: none;
    }
  }
  &.timeControlHidden {
    .timeContainer {
      display: none;
    }
  }
  &.volumeControlHidden {
    .volumeContainer {
      display: none;
    }
  }
  &.fullScreenControlHidden {
    .fullScreenContainer {
      display: none;
    }
  }
  &.progressControlHidden {
    .progressBarContainer {
      display: none;
    }
  }
  &.downloadButtonHidden {
    .downloadContainer {
      display: none;
    }
  }
  &.pictureInPictureButtonHidden {
    .pictureInPictureContainer {
      display: none;
    }
  }
}

.elementsContainer {
  position: relative;

  display: flex;

  width: 100%;

  flex-grow: 2;
}

.progressBarContainer {
  position: relative;
  top: 2px;

  padding: 0 20px;

  @include query(in-full-screen()) {
    top: 3px;

    padding: 0 30px;
  }
  @include query(max-width-550()) {
    padding: 0 15px;
  }
  @include query(max-width-280()) {
    padding: 0 12px;
  }
}

.progressBarContainer,
.controlsContainerLeft,
.controlsContainerRight,
.logoContainer {
  transition: opacity .2s;

  opacity: 0;
}

.controlsContainerRight,
.controlsContainerLeft {
  position: relative;

  display: flex;
  flex: 1;

  width: 100%;
  max-width: 100%;

  align-items: center;
}

.controlsContainerRight {
  justify-content: flex-end;
}

.controlsContainerRight,
.controlsContainerLeft,
.logoContainer {
  height: 54px;

  @include query(in-full-screen()) {
    height: 80px;
  }
  @include query(max-width-550()) {
    height: 42px;
  }
  @include query(max-width-350()) {
    height: 36px;
  }
}

.playContainer {
  margin-right: 8px;
  margin-left: 13px;

  @include query(in-full-screen()) {
    margin-right: 20px;
    margin-left: 20px;
  }
  @include query(max-width-550()) {
    margin-left: 7px;
  }
  @include query(max-width-280()) {
    margin-left: 4px;
  }
}

.volumeContainer {
  margin-right: 13px;

  @include query(in-full-screen()) {
    margin-right: 20px;
  }
}

.timeContainer {
  margin-right: 18px;

  @include query(in-full-screen()) {
    margin-right: 30px;
  }
  @include query(max-width-400()) {
    display: none;
  }
}

.downloadContainer {
  margin-right: 8px;

  @include query(in-full-screen()) {
    margin-right: 18px;
  }
}

.fullScreenContainer {
  margin-right: 8px;

  @include query(in-full-screen()) {
    margin-right: 18px;
    //margin-left: 0;
  }
}

.pictureInPictureContainer {
  margin-right: 8px;

  @include query(in-full-screen()) {
    margin-right: 18px;
  }
}

.logoContainer {
  display: flex;

  margin-right: 14px;

  @include query(max-width-550()) {
    margin-right: 9px;
  }
  @include query(in-full-screen()) {
    margin-right: 23px;
  }
  @include query(max-width-280()) {
    margin-right: 12px;
  }
}

.additionalButton {
  margin-right: 8px;

  @include query(in-full-screen()) {
    margin-right: 18px;
  }
}

.background {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  //height less then background by 1px 'cause of strange problem on chrome, when visible size of background is 181px
  //maybe it's 'cause of linear-gradient

  height: 181px;

  transition: opacity .2s;
  pointer-events: none;

  opacity: 0;
  background-image: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0),
  rgba(0, 0, 0, .03) 24%,
  rgba(0, 0, 0, .15) 50%,
  rgba(0, 0, 0, .3) 75%,
  rgba(0, 0, 0, .4)
  );
  background-size: 100% 182px;
}