ul.colorpalette {
  margin-bottom: 0;

  li {
    label {
      position: relative;
      border: 0!important;
      // border-radius: .5rem;
      // outline: 2px solid #ced5e1!important;
    }

    input[value="None"],
    input[value="none"],
    input[value="transparent"] {
      + label:before {
        content: 'unset';
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: .6;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        transform: translate(-50%, -50%);
      }

      &:checked + label:before {
        content: none;
      }
    }
  }
}

.colorpalette {
  .form__field-holder,
  ul,
  li {
    overflow: visible !important;
  }

  ul.colorpalette {
    li {
      display: inline-block;
      float: none!important;

      label {
        outline: 1px solid var(--cms-border-colour)!important;
      }
    }
  }

  label {

    span {
      display: none;
      position: absolute;
      z-index: 100;
      top: -5px;
      left: -5px;
      padding: 0 4px;
      border-radius: 2px;
      font-size: 1rem;
      white-space: nowrap;
      text-transform: capitalize;
      border: 1px solid var(--cms-border-colour);
      background-color: var(--cms-background-colour--dark);
      color: var(--cms-text-colour);
    }

    &:hover {
      span {
        display: block;
      }
    }
  }
}

ul.colorpalette {
  font-size: 0;
  padding-top: 10px;

  li {
    label {
      margin-top: 0;
      margin-left: 0;
      margin-bottom: 10px;
      margin-right: 10px;
      border-radius: 1px;

      &:after {
        font-size: 14px;
      }
    }
  }
}