@use '../variables' as *;

$dropdown-menu: 10;

.dropDown {
  display: inline-block;
  position: relative;
  z-index: $dropdown-menu;
}

.button {
  display: inline-block;
  > :global(.app-icon) {
    font-size: 10px;
    margin-left: 4px;
  }
}

.menu {
  composes: visibleScrollbars from '../dim-ui/common.m.scss';
  position: absolute;
  z-index: 5;
  left: 0;
  max-height: calc(var(--viewport-height) - 50px - var(--header-height));
  overflow: auto;
  margin-top: 2px;
  width: max-content;
  background: var(--theme-dropdown-menu-bg);

  columns: 4;
  column-gap: 0;

  &.right {
    left: initial;
    right: 0;
  }
}

.checkButton {
  border-radius: 0;
  border: none;
  box-sizing: border-box;
  color: var(--theme-text);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 12px;
  margin: 0;
  padding: 8px;
  text-shadow: 1px 1px 3px rgb(0, 0, 0, 0.25);
  min-width: 15em;
  gap: 8px;

  @include interactive($hover: true, $active: true) {
    color: var(--theme-text-invert);
    box-shadow: none;
    background-color: var(--theme-accent-primary);
  }

  :global(.app-icon) {
    margin: auto 0 auto 4px;
  }

  label {
    display: flex;
    gap: 4px;
    margin-right: 4px;
    > :global(.app-icon) {
      margin-right: 4px;
    }
    > img {
      margin-right: 4px;
      vertical-align: middle;
    }
  }
}
