.inspector-panel.data-display {
  .sub-options {
    margin-bottom: 5px;
    margin-left: 20px;

    label {
      display: flex;
      padding: 1px 0;
    }
  }

  .color-picker-thumb {
    width: 50px !important;
    height: 32px !important;
    padding: 2px 5px !important;
    margin: 2px 1px;
    border: 1px solid #d0d0d0;

    &.categorical {
      position: absolute;
      right: 2px;
    }
    .color-picker-thumb-swatch {
      width: 35px;
      height: 18px;
      position: relative;
      left: 2px;
      border: 1px solid var(--codap-colors-gray-500);
    }
  }

  .cat-color-setting {
    height: 75px;
    overflow-y: scroll;

    // We limit the number of categories visible to 3 so we need to force the
    // vertical scrollbar to be visible if there are more than 3 so users know
    // it is a scrollable list of categories. This only works for Chrome and Safari.
    // Still need to figure out what to do for Firefox
    &::-webkit-scrollbar-track {
      border-radius: 0.175rem;
      background-color: lightgray;
    }
    &::-webkit-scrollbar {
      width: 0.35rem;
      border-radius: 0.125rem;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 0.175rem;
      background-color: gray;
    }

    .cat-color-picker {
      margin: 6px 0;
    }
  }

  .num-color-setting {
    margin: 3px 0;
  }
}

.map-values-layer-label {
  border-bottom: solid #C1C5C7 1px;
  font-weight: bold;
}
