/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";
@import "~@bentley/ui-core/lib/ui-core/style/typography";

button.components-colorpicker-button {
  font-family: $uicore-font-family;
  font-size: $uicore-font-size;
  color: $buic-foreground-body;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 3px;
  background-color: transparent;
  border: none;
  padding: 0;

  >.components-colorpicker-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 3px;
  
    >.components-colorpicker-button-color-swatch {
      border: 1px solid $buic-inputs-border;
      border-radius: 3px;
      width: 1.25em;
      height: 1.25em;
    }

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

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

  &:disabled {
    pointer-events: none;
    >.components-colorpicker-button-container {
      >.components-caret {
        color: $buic-icon-color-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 $buic-inputs-border;
  border-radius: 6px;

  .components-colorpicker-popup-container {
    color: $buic-foreground-body;
    background: $buic-background-control;
    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);
        }
      }
    }
  }
}