@import '../_variables.scss';

.layer-switcher.ol-control {
  position: absolute;
  top: $default-spacing;
  left: $default-spacing;

  border: none;
  box-shadow: none;
  background: none;

  .panel {
    padding: 0;
    margin: 0;
    max-height: 100%;
    overflow-y: auto;
    border: none;
    border-radius: $border-radius;
    background: none;

    ul {
      padding: 0;
      margin: 0;
    }
  }

  ul {
    padding-left: 1em;
    list-style: none;
  }

  li {
    &.group {
      box-shadow: $box-shadow;
      background-color: $background-color;
      margin-bottom: $default-spacing;
      padding: $default-spacing;

      &:last-child {
        border-bottom: none;
      }

      > label {
        display: none;
      }
    }

    &.layer {
      display: table;
      width: 100%;

      &:first-child {
        margin-top: 0px;
      }

      &:last-child {
        margin-bottom: 0px;
      }

      label {
        display: table-cell;
        vertical-align: sub;
        cursor: pointer;
        line-height: 2em;
        font-size: 0.8em;
        border-radius: $border-radius;
        color: $primary-alpha;
        min-width: 10em;
        text-transform: uppercase;
        text-align: center;
      }

      input {
        display: none;

        &:checked ~ label {
          color: $primary-color;
        }
      }
    }
  }
}