@import '../shared';

$active-color: #ea492e;
$inactive-color: #959595;

.liveIndicator {
  position: relative;
  // position styles end

  transition: background-color .2s;

  background-color: $inactive-color;
  // position styles start

  @include query(ltr()) {
    margin-right: 15px;

    direction: ltr;
  }
  @include query(rtl()) {
    margin-left: 15px;

    direction: rtl;
  }
  @include query(in-full-screen(), ltr()) {
    margin-right: 20px;
  }
  @include query(in-full-screen(), rtl()) {
    margin-left: 20px;
  }
  @include query(max-width-550(), ltr()) {
    margin-right: 10px;
  }
  @include query(max-width-550(), rtl()) {
    margin-left: 10px;
  }
  @include query(max-width-280()) {
    padding: 2px 3px;
  }
  @include query(max-width-280(), ltr()) {
    margin-right: 10px;
  }
  @include query(max-width-280(), rtl()) {
    margin-left: 10px;
  }

  &.ended {
    cursor: default;
  }

  &:hover:not(.ended),
  &.active {
    background-color: $active-color;
  }
}

.clickable {
  cursor: pointer;
}

button.liveIndicatorButton {
  font-size: 12px;
  line-height: 14px;

  padding: 5px 6px;

  user-select: none;
  text-transform: uppercase !important;

  color: #fff;
  border: 0;
  border-radius: 0;
  outline: none;
  background-color: transparent;

  @include query(max-width-280()) {
    font-size: 10px;
    line-height: 12px;
  }
}