// LAYER LIST
.maputnik-add-layer {
}

.maputnik-layer-list {
  &-header{
    padding: $margin-2;
    display: flex;
    display: -ms-flexbox;
    @include vendor-prefix(flex-direction, row)

    > * {
      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;
  }

  &-item {
    font-weight: 400;
    color: $color-lowgray;
    font-size: $font-size-6;
    border-width: 0px 0px 1px;
    border-style: solid;
    border-color: lighten($color-black, 0.1);
    user-select: none;
    list-style: none;
    z-index: 2000;
    cursor: pointer;
    position: relative;
    padding: 5px 10px;
    line-height: 1.3;
    max-height: 50px;
    display: flex;
    display: -ms-flexbox;
    @include vendor-prefix(flex-direction, row);
     opacity: 1;

    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
  }

  &-icon-action svg {
    fill: $color-black;
  }

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

    .maputnik-layer-list-icon-action svg {
      fill: darken($color-lowgray, 0.5);
      &:hover {
        fill: $color-white;
      }
    }
  }

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

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

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

  &-item-id {
    width: 115px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

  &-group-header {
    font-size: $font-size-6;
    color: $color-lowgray;
    background-color: lighten($color-black, 2);
    cursor: pointer;
    user-select: none;
    padding: $margin-2;
    display: flex;
    display: -ms-flexbox;
    @include vendor-prefix(flex-direction, row)

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

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

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


// FILTER EDITOR
.maputnik-layer-editor-group {
  font-weight: bold;
  font-size: $font-size-5;
  background-color: lighten($color-black, 2);
  color: $color-white;
  cursor: pointer;
  user-select: none;
  padding: $margin-2;
  display: flex;
  display: -ms-flexbox;
  @include vendor-prefix(flex-direction, row)
  line-height: 20px;

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