//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// 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), .2);
      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;

      &: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;
      }
    }

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

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

    /* stylelint-disable-next-line no-descending-specificity */
    span {
      left: 6px;
    }
  }
}

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

    /* stylelint-disable-next-line no-descending-specificity */
    span {
      right: 6px;
    }
  }
}
