@import '../shared';

.overlay {
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;

  &.active {
    display: flex;

    justify-content: center;
    align-items: center;
  }
}

.poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: black no-repeat center;
  background-size: cover;

  justify-content: center;
  align-items: center;
}

.poster:before {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  content: '';

  background-color: rgba(0, 0, 0, .35);
}

.icon {
  position: relative;

  width: 71px;
  height: 71px;

  cursor: pointer;

  opacity: 1;

  @include query(max-width-550()) {
    width: 54px;
    height: 54px;
  }
  @include query(max-width-400()) {
    width: 36px;
    height: 36px;
  }

  &:hover {
    opacity: .8;
  }
}

.transparency {
  background: transparent;
}