editor/src/styles/_layer.scss

@use 'sass:color';
// LAYER LIST
.maputnik-layer-list {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;

  &-header {
    padding: $margin-2 $margin-2 $margin-3;

    @include flex-row;
    flex: 0 0;

    > * {
      vertical-align: middle;
      margin-bottom: 0;
    }
  }

  &-header-title {
    font-size: $font-size-5;
    color: $color-white;
    font-weight: bold;
    line-height: 1.3;
  }

  &-container {
    padding: 0;
    margin: 0;
    padding-bottom: $margin-5;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }

  &-item-handle {
    flex: 1;
    display: flex;
    cursor: grab;

    svg {
      margin-right: 4px;
    }
  }

  &-item {
    border: solid 1px transparent;
    font-weight: 400;
    color: $color-lowgray;
    font-size: $font-size-6;
    border-bottom-color: color.adjust($color-black, $lightness: 0.1%);
    user-select: none;
    list-style: none;
    z-index: 2000;
    cursor: pointer;
    position: relative;
    padding: 5px;
    line-height: 1.3;
    max-height: 50px;
    opacity: 1;
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;

    &:focus-within {
      border: solid 1px $color-lowgray;
    }

    @media screen and (prefers-reduced-motion: reduce) {
      transition-duration: 0;
    }

    @include flex-row;
  }

  &-icon-action {
    display: none;

    svg {
      fill: $color-black;
    }
  }

  .maputnik-layer-list-icon-action {
    background: initial;
    border: none;
    padding: 0 2px;
    height: 15px;

    svg {
      fill: color.adjust($color-lowgray, $lightness: -20%);

      &:hover {
        fill: $color-white;
      }
    }
  }

  .maputnik-layer-list-icon-action__visibility--hide {
    display: block;
  }

  .maputnik-layer-list-item:hover,
  .maputnik-layer-list-item-selected {
    background-color: color.adjust($color-black, $lightness: 2%);

    .maputnik-layer-list-icon-action {
      display: block;

      svg {
        fill: color.adjust($color-lowgray, $lightness: -0.5%);
      }
    }
  }


  .maputnik-layer-list-item--error {
    color: $color-red;
  }

  &-item-selected {
    color: $color-white;
  }

  &-item-collapsed {
    position: absolute;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    visibility: hidden;
  }

  &-item-group-last {
    border-bottom: 2px solid $color-gray;
  }

  &-item-id {
    all: inherit;
    width: 115px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    // HACK: Remove important
    outline: none !important;
  }

  &-group-header {
    border: solid 1px transparent;
    font-size: $font-size-6;
    color: $color-lowgray;
    background-color: color.adjust($color-black, $lightness: 2%);
    user-select: none;
    padding: $margin-2;

    &:focus-within {
      border: solid 1px $color-lowgray;
    }

    button {
      all: unset;
      cursor: pointer;
    }

    @include flex-row;

    svg {
      width: 14px;
      height: 14px;
    }
  }

  &-group-title {
    vertical-align: middle;
  }

  &-group-content {
    margin: 0 $margin-3;
  }
}

// FILTER EDITOR
.maputnik-layer-editor-group {
  font-weight: bold;
  font-size: $font-size-5;
  background-color: color.adjust($color-black, $lightness: 2%);
  color: $color-white;
  cursor: pointer;
  user-select: none;
  line-height: 20px;
  border-top: solid 1px #36383e;

  &__button {
    flex: 1;
    display: flex;
    padding: $margin-2;

    &__icon {
      fill: white;
    }

    &__icon--up {
      display: block;
    }

    &__icon--down {
      display: none;
    }

  }

  &__button[aria-expanded="true"] {
    .maputnik-layer-editor-group__button__icon--up {
      display: none;
    }

    .maputnik-layer-editor-group__button__icon--down {
      display: block;
    }
  }


  @include flex-row;

  &:hover {
    background-color: $color-gray;
  }
}

// PROPERTY
.maputnik-default-property {
  .maputnik-input-block-label {
    color: color.adjust($color-lowgray, $lightness: -20%);
  }

  .maputnik-string,
  .maputnik-number,
  .maputnik-color,
  .maputnik-select,
  .maputnik-checkbox-wrapper {
    background-color: color.adjust($color-gray, $lightness: -2%);
    color: color.adjust($color-lowgray, $lightness: -20%);
  }

  .maputnik-make-zoom-function svg {
    opacity: 0.4;
  }

  .maputnik-multibutton .maputnik-button {
    background-color: color.adjust($color-midgray, $lightness: -10%);
    color: color.adjust($color-lowgray, $lightness: -20%);

    &:hover {
      background-color: color.adjust($color-midgray, $lightness: 12%);
      color: $color-white;
    }
  }

  .maputnik-multibutton .maputnik-button-selected {
    background-color: color.adjust($color-midgray, $lightness: -2%);
    color: $color-lowgray;
  }
}

.more-menu {
  position: relative;

  svg {
    width: 22px;
    height: 22px;
  }

  &__menu {
    position: absolute;
    z-index: 9999;
    background: $color-black;
    border: solid 1px $color-midgray;
    right: 0;
    min-width: 120px;
  }

  &__button__svg {
    width: 24px;
    height: 24px;
  }

  &__menu__item {
    padding: 4px;
  }
}

.layer-header {
  display: flex;
  padding: 6px;
  background: $color-black;

  &__title {
    flex: 1;
    margin: 0;
    line-height: 24px;
  }

  &__info {
    min-width: 28px;
  }
}

// Clone of the element which is sorted
.sortableHelper {
  font-family: $font-family;
  z-index: 9999;
  border: none;
}