/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

.HotbarSelector {
  display: flex;
  align-items: center;
  height: 26px;
  background-color: var(--layoutBackground);
  position: relative;

  &:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(0deg, var(--clusterMenuBackground), transparent);
    top: -20px;
  }

  .HotbarIndex {
    display: flex;
    flex-grow: 1;
    align-items: center;
  }

  .Badge {
    cursor: pointer;
    background: var(--secondaryBackground);
    width: 100%;
    color: var(--settingsColor);
    padding-top: 3px;
  }

  .Icon {
    --size: 16px;
    padding: 0 4px 0 0px;
    margin: 0px 4px;

    &:hover {
      box-shadow: none;
      background-color: transparent;
    }

    &.previous {
      transform: rotateY(180deg);
    }
  }
}