/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

.HotbarMenu {
  .HotbarIcon {
    --size: 37px;

    border-radius: 6px;
    user-select: none;
    cursor: pointer;
    transition: none;
    text-shadow: 0 0 4px #0000008f;
    position: relative;

    div.MuiAvatar-colorDefault {
      font-weight:500;
      text-transform: uppercase;
      border-radius: 6px;
    }

    &.disabled {
      opacity: 0.4;
      cursor: default;
      filter: grayscale(0.7);

      &:hover {
        &:not(.active) {
          box-shadow: none;
        }
      }
    }

    &.isDragging {
      box-shadow: none;
    }

    div.MuiAvatar-root {
      &.active {
        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
        transition: all 0s 0.8s;
      }

      &:hover {
        &:not(.active) {
          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
        }
      }
    }

    .led {
      position: absolute;
      left: 3px;
      top: 3px;
      background-color: var(--layoutBackground);
      border: 1px solid var(--clusterMenuBackground);
      border-radius: 50%;
      padding: 0px;
      width: 8px;
      height: 8px;

      &.online {
        background-color: var(--primary);
        box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary);
      }
    }

    .badge {
      position: absolute;
      right: -2px;
      bottom: -3px;
      margin: -8px;
      font-size: var(--font-size-small);
      background: var(--clusterMenuBackground);
      color: var(--textColorAccent);
      padding: 0px;
      border-radius: 50%;
      border: 2px solid var(--clusterMenuBackground);
      width: 15px;
      height: 15px;

      svg {
        width: 13px;
      }
    }

    img {
      width: var(--size);
      height: var(--size);
    }
  }

  .HotbarIconMenu {
    left: 30px;
    min-width: 250px;

    li.MenuItem {
      font-size: 0.9em;
    }
  }
}