//
// Color
//

@color-input-swatch-checker-color: contrast(@textfield-background-color, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25));
@color-input-swatch-border-radius: @control-border-radius;

.tox {
  .tox-color-input {
    display: flex;
    position: relative;
    z-index: 1;

    .tox-textfield {
      z-index: -1;
    }

    span {
      border-color: rgba(red(@color-black) green(@color-black) blue(@color-black) / 20%);
      border-radius: @color-input-swatch-border-radius;
      border-style: solid;
      border-width: 1px;
      box-shadow: none;
      box-sizing: border-box;
      height: @textfield-height - 12px;
      position: absolute;
      top: 6px;
      width: $height;

      @media (forced-colors: active) {
        border-color: currentColor;
        border-width: 2px !important;
        forced-color-adjust: none;
      }

      &:hover:not([aria-disabled=true]),
      &:focus:not([aria-disabled=true]) {
        border-color: @input-button-focus-border-color;
        cursor: pointer;
      }

      &::before {
        background-image:
          linear-gradient(45deg, @color-input-swatch-checker-color 25%, transparent 25%),
          linear-gradient(-45deg, @color-input-swatch-checker-color 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, @color-input-swatch-checker-color 75%),
          linear-gradient(-45deg, transparent 75%, @color-input-swatch-checker-color 75%);
        background-position: 0 0, 0 6px, 6px -6px, -6px 0;
        background-size: 12px 12px;
        border: 1px solid @textfield-background-color;
        border-radius: @color-input-swatch-border-radius;
        box-sizing: border-box;
        content: '';
        height: @textfield-height - 12px;
        left: -1px;
        position: absolute;
        top: -1px;
        width: $height;
        z-index: -1;

        @media (forced-colors: active) {
          border: none;
        }
      }
    }

    span[aria-disabled=true] {
      cursor: not-allowed;
    }
  }
}

.tox:not([dir=rtl]) {
  .tox-color-input {
    .tox-textfield {
      padding-left: @textfield-height;
    }

    span {
      left: 6px;
    }
  }
}

// RTL
.tox[dir="rtl"] {
  .tox-color-input {
    .tox-textfield {
      padding-right: @textfield-height;
    }

    span {
      right: 6px;
    }
  }
}
