.ColorInput {
  position: relative;

  &-preview, &-icon {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 20px;
    height: 20px;
  }

  &-preview {
    display: inline-block;
    border-radius: 15%;
    padding: 0;
    cursor: pointer;
    overflow: hidden;

    // Match both the wrapper div and the div with the background color
    &, &::-webkit-color-swatch-wrapper, &::-webkit-color-swatch {
      border: none;
      padding: 0;
    }

    // This has to be a separate entry so other browsers
    // don't ignore the entire CSS rule. Thanks Firefox.
    &::-moz-color-swatch {
      border: none;
    }
  }

  &-icon {
    text-align: center;
    color: @validation-error-color;
  }
}
