.player .top-bar {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  visibility: hidden;
  position: relative;
  height: auto;
  min-height: #{$top-bar-max-height}px;
  max-height: #{$top-bar-max-height}px;
  margin-top: #{-$top-bar-max-height}px;
  transition:
    #{$hover-animation-time}ms visibility ease-in-out,
    #{$hover-animation-time}ms margin-top ease-in-out,
    #{$hover-animation-time}ms min-height ease-in-out;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: auto;
  .top-bar-area {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - #{2 * $top-bar-top-bottom-gutter}px);
    width: calc(100% - #{2 * $gui-gutter}px);
    margin: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px;
    pointer-events: none;
    &:empty {
      margin: 0;
      height: 0;
      width: 0;
    }
  }
  &.disabled {
    pointer-events: none;
  }
  &.hide {
    display: none;
  }

  .left-controls {
    float: left;
    text-align: left;
    min-width: 0;
    margin: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px;
    pointer-events: none;
    &:empty {
      margin: 0;
    }
  }
  .right-controls {
    float: right;
    text-align: left;
    margin: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px #{$top-bar-top-bottom-gutter}px 32px;
    pointer-events: none;
    &:empty {
      margin: 0;
    }

    .control-button-container:not(.upper-bar-icon) {
      margin: 0 6px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.player.casting,
.player.metadata-loaded.hover,
.player.state-paused,
.player.state-idle,
.player.ad-break,
.player.menu-active {
  &:not(.overlay-active) {
    .top-bar {
      visibility: visible;
      margin-top: 0;
      min-height: #{$gui-gutter}px;
    }
  }
}

.player {
  .top-bar {
    .left-controls,
    .right-controls,
    .top-bar-area {
      & > * {
        pointer-events: auto;
      }
    }
  }
}

.player .top-bar:has(.left-controls:empty + .right-controls:empty) {
  visibility: hidden;
}

.player.size-sm .top-bar {
  .left-controls {
    margin: #{$top-bar-top-bottom-gutter}px 0 #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;
    &:empty {
      margin: 0;
    }
  }

  .right-controls {
    margin: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px #{$top-bar-top-bottom-gutter}px 0;
    &:empty {
      margin: 0;
    }
  }
  .top-bar-area {
    width: calc(100% - #{2 * $gui-small-gutter}px);
    margin: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;
    &:empty {
      margin: 0;
    }
  }
}