@import '../shared';

.topBlock {
  position: relative;
  z-index: 60;

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

  &.activated {
    .titleContainer,
    .background {
      opacity: 1;
    }
  }
}

.liveIndicatorContainer {
  flex-grow: 0;
}

.elementsContainer {
  position: relative;

  display: flex;
  flex-direction: row;

  margin-top: 20px;

  align-items: center;
  @include query(ltr()) {
    margin-left: 20px;
  }
  @include query(rtl()) {
    margin-right: 20px;

    direction: rtl;
  }
  @include query(in-full-screen()) {
    margin-top: 30px;
  }
  @include query(in-full-screen(), ltr()) {
    margin-left: 30px;
  }
  @include query(in-full-screen(), rtl()) {
    margin-right: 30px;

    direction: rtl;
  }
  @include query(max-width-550()) {
    margin-top: 15px;
  }
  @include query(max-width-550(), ltr()) {
    margin-left: 15px;
  }
  @include query(max-width-550(), rtl()) {
    margin-right: 15px;

    direction: rtl;
  }
  @include query(max-width-280()) {
    margin-top: 12px;
  }
  @include query(max-width-280(), ltr()) {
    margin-left: 12px;
  }
  @include query(max-width-280(), rtl()) {
    margin-right: 12px;

    direction: rtl;
  }
}

.titleContainer {
  max-width: calc(100% - 200px);

  transition: opacity .2s;

  opacity: 0;

  flex-grow: 1;
}

.background {
  position: absolute;
  top: 0;
  right: 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 top,
  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;
}