.layers, .edit-layer {

  .layer {
    
    margin-bottom:0.6rem;

    .caption {
      height: 5.4rem;
      img { height: 5.4rem; }
    }

    &, &:last-child {
      border: 1px solid #FCFCFC;
    }

    .title {
      color: color(text);
    }

    .description {
      font-size: 0.9em;
      line-height: 1.1em;
    }

  }

  .diagram {
    margin-top: 0.5rem;
  }

  .diagram-buttons {
    .button.active {
      @extend .filled.primary;
    }
  }


}


.edit-layer .layer {
  background-color: color(variable);
}

.edit-layer.config-order-surf .sub-viz-row {
  margin-top: 1em;
  &:last-child {
    margin-top: 2em;
  }
  .button.select-viz-button {
    display: block;
    text-align: left;
    background-color: color(primary2);
    color: white;
    padding: 0.25rem 0.5em;
    border-radius: 1rem;
    margin-bottom: 1em;
    line-height: 1.5em;
  }
  .description {
    text-align: justify;
    font-size: 0.9em;
    .know-more {
      display: block;
      color: color(primary, shade);
    }
  }
  .caption {
    padding: 0 1em;
    img {
      width: 100%;
    }
    &.caption-classes {
      padding: 0 2.2em 0 1em;
    }
  }
}

.edit-layer .title.choose-var-setting,
.edit-layer .title.multi-mapping {
  font-size: 1.7rem;
}

.edit-layer .settings.choose-var-setting {
  color: color(titles);
}

.edit-layer .title.multi-mapping {
  text-transform: uppercase;
  color: #404040;
}

.edit-layer .title.secondary {
  color: #404040;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}


// Controls adjustements

.btn-switch-group .button:not(.selected) {
  background-color: greys(30%);
}


// V center checkbox (must be on container)
.offset-checkbox {
  margin-top: 2px;
}


// Fixed Height + padding bug on firefox
input[type=text].padding-fix {
  padding: .1rem 1rem;
}


// Swatches dropdown
.layer-color-selector {

  .dropdown-trigger {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 21px;
    margin-left: 0 !important;
  }

  .layer-color-swatch {
    border: none;
    margin-right: .5rem;
  }

  .swatch {
    width: 15px;
    height: 13px;
  }

}


// Patterns selector
.layer-pattern-selector {
  display: flex;
  align-items: center;

  .layer-pattern-swatch {
    margin: 0;
    margin-left: 1rem;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .layer-pattern-swatch li {
    margin-right: 0.5rem;
  }

  .layer-pattern-swatch svg {
    border: 1px solid greys(30%);

    &.selected {
      border: 0.2rem solid #B29D8D;
    }
  }

}

.brewer-tabs {
  //border-bottom: 1px solid black;
}



// Categories
.categories-list {

  border: none;

  &.collection.scrollable {
    overflow-y: scroll;
    flex-basis: auto;
    flex-shrink: 1;
    flex-grow: 1;
    max-height: 45vh;
  }

  > li {
    //height: 35px;
    display: flex;
    align-items: stretch;
    margin-bottom: 0.5rem;
  }

  .categories-controls {
    flex: 1;
    display: flex;
  }

  .categories-control {
    flex: 1;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;

    // SP
    .sp-replacer {
      display: flex !important;
      background-color: transparent !important;
    }

    &.categories-shape-control {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .dropdown li {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    // Dropdown
    .dropdown-trigger {
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        font-size: 2.1rem;
      }

    }
  }

  .categories-control:not(:first-child) {
    margin-left: 0.3rem;
  }

  .categories-name {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.8rem;
    font-size: 1.4rem;
    color: #000;

    &.categories-surface {
      flex: 3;
    }

    &.categories-symbol-ordered, &.categories-surface-ordered {
      flex: 3;
      border-top-left-radius: 1.7rem;
      border-bottom-left-radius: 1.7rem;
      margin-left: 0.1rem;
    }
  }

  li.ordered {
    background: transparent;
  }

  li.ordered .categories-name {
    box-shadow: 0px 2px 5px 0px rgba(64,64,64,0.5);
  }

  li.ordered .categories-shape-control svg, li.ordered .categories-fill-color-control svg {
    height: 24px;
    width: 24px;
  }

  li.ghost .categories-name {
    visibility: hidden;
  }

  li.ordered.dragged {
    border: none;
  }

  li.ordered .categories-name {
    background-color: #fff;
  }

  li.ordered.overed .categories-name {
    background-color: color(primary);
  }

  li.ordered.dragged .categories-controls {
    visibility: hidden;
  }

  .toggle-visibility {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translate(0, -50%);
    font-size: 1.2rem;
  }

  .categories-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
  }

  .categories-progress .bar {
    background-color: #000;
  }

}

.proportional-sym-layout-icon.active img {
  background-color: color(primary);
}
