/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
button.components-colorpicker-button {
  font-family: var(--iui-font-sans);
  font-size: var(--iui-font-size-1);
  color: var(--iui-color-text);
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--iui-border-radius-1);
  background-color: transparent;
  border: none;
  padding: 0;

  > .components-colorpicker-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--iui-border-radius-1);

    > .components-colorpicker-button-color-swatch {
      border: 1px solid var(--iui-color-border-foreground);
      border-radius: var(--iui-border-radius-1);
      width: 1.25em;
      height: 1.25em;
    }

    > .components-caret {
      margin-left: 0.25em;
      margin-right: 0.25em;
    }
  }

  &:not(.readonly) {
    cursor: pointer;
  }

  &:disabled {
    pointer-events: none;

    > .components-colorpicker-button-container {
      > .components-caret {
        color: var(--iui-color-text-disabled);
      }
    }
  }

  &.round {
    .components-colorpicker-button-container {
      border-bottom-left-radius: 50%;
      border-top-left-radius: 50%;
    }

    .components-colorpicker-button-color-swatch {
      border-radius: 50%;
    }
  }
}

.components-colorpicker-popup {
  border: 1px solid var(--iui-color-border-foreground);
  border-radius: 6px;

  .components-colorpicker-popup-container {
    color: var(--iui-color-text);
    background: var(--iui-color-background);
    border-radius: 6px;

    > .components-colorpicker-popup-colors {
      display: grid;
      grid-gap: 8px;
      padding: 8px;

      > .components-colorpicker-swatch {
        height: 1.5em;
        width: 1.5em;
        transition: scale 0.2s ease;
        cursor: pointer;
        outline: none;

        &:hover {
          transform: scale(1.15);
        }
      }
    }
  }
}