//
// Color swatches
//

@swatch-size: 30px;
@swatch-picker-button-icon-fill: @text-color;
@swatch-picker-button-icon-height: 24px;
@swatch-picker-button-icon-width: 24px;
@swatch-remove-color-stroke-color: #e74c3c;
@swatch-outline-color: rgba(127, 127, 127, .3);

.tox {
  .tox-toolbar .tox-swatches,
  .tox-toolbar__primary .tox-swatches,
  .tox-toolbar__overflow .tox-swatches {
    margin: @toolbar-button-spacing-y 0 (@toolbar-button-spacing-y + 1) @toolbar-group-padding-x;
  }

  // Remove menu border/padding when swatch is used in a collection list context
  .tox-collection--list .tox-collection__group .tox-swatches-menu {
    border: 0;
    margin: -@collection-item-separator-margin-y -@menu-item-collection-list-padding;
  }

  .tox-swatches__row {

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

    display: flex;
  }

  .tox-swatch {
    height: @swatch-size;
    transition: transform .15s, box-shadow .15s;
    width: @swatch-size;

    &:hover,
    &:focus {
      box-shadow: 0 0 0 1px @swatch-outline-color inset;
      transform: scale(.8);
    }
  }

  .tox-swatch--remove {
    align-items: center;
    display: flex;
    justify-content: center;

    svg path {
      stroke: @swatch-remove-color-stroke-color;
    }
  }

  .tox-swatches__picker-btn {
    align-items: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    height: @swatch-size;
    justify-content: center;
    outline: none;
    padding: 0;
    width: @swatch-size;

    svg {
      fill: @swatch-picker-button-icon-fill;
      height: @swatch-picker-button-icon-height;
      width: @swatch-picker-button-icon-width;
    }

    &:hover {
      background: @toolbar-button-hover-background-color;
    }
  }

  div.tox-swatch:not(.tox-swatch--remove) {
    svg {
      display: none;
      fill: @swatch-picker-button-icon-fill;
      height: @swatch-picker-button-icon-height;
      margin: calc((@swatch-size - @swatch-picker-button-icon-height) / 2) calc((@swatch-size - @swatch-picker-button-icon-width) / 2);
      width: @swatch-picker-button-icon-width;

      path {
        fill: #fff;
        paint-order: stroke;
        stroke: #222f3e;
        stroke-width: 2px;
      }
    }

    &.tox-collection__item--enabled svg {
      display: block;
    }
  }
}

.tox:not([dir=rtl]) {
  .tox-swatches__picker-btn {
    margin-left: auto;
  }
}

// RTL
.tox[dir=rtl] {
  .tox-swatches__picker-btn {
    margin-right: auto;
  }
}
