/* ----------------------------------------- */
/* Hotbar                                    */
/* ----------------------------------------- */

#hotbar[data-theme] {
  .bar-controls {
    @include dui-app;
  }

  .macro {
    height: calc(var(--macro-size) + 2px);
    width: calc(var(--macro-size) + 2px);
    @include dui-app;

    &.inactive::before,
    &.active::before {
      @include quick-transition;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--border-radius);
      overflow: hidden;
      pointer-events: none;
    }

    &.active:hover::before {
      @include quick-transition;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: color-mix(in srgb, var(--color-primary-1) 20%, transparent);
      border-radius: var(--border-radius);
      overflow: hidden;
      pointer-events: none;
    }

    .macro-key {
      background: none;
      right: 6px;
      padding: 0px;
      font-weight: initial;
      text-shadow: 0px 1px 5px black, 0px 1px 5px black;
      font-size: calc(var(--macro-size) / 3);
    }

    .macro-icon {
      border-radius: var(--border-radius);
      height: calc(var(--macro-size) + 0px);
      width: calc(var(--macro-size) + 0px);
    }
  }

  #macro-list {
    gap: 5px;
    margin: 0px 5px;
    border: none;
    grid-template-columns: repeat(10, calc(var(--macro-size) + 2px));
    align-content: end;
  }
}
