/*---------------------------------------------------------------------------------------------
* 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/index";

$hovered-icon-color: $buic-foreground-primary-tone;
$saturation-hue-height: 150px;

.components-colorpicker-panel {
  display: flex;
  flex-direction: column;

  .components-colorpicker-panel-color {
    display: flex;
    flex-direction: row;
    height: 100%;
    column-gap: 20px;

    .components-colorpicker-saturation {
      margin: 1em;
      display: block;
      width: calc(100% - 40px);
      height: $saturation-hue-height;
    }

    .components-hue-container-vertical {
      height: $saturation-hue-height;
      margin-top: 1em;
      margin-right: .5em;
      }
  }

  .components-color-swatch {
    width: 2.0em;
    height: 2.0em;
  }
}

.components-colorpicker-panel-presets {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  column-gap: 2px;
  row-gap: 10px;
  border-top: 1px solid $buic-inputs-border;
  justify-items: center;

  .components-colorpicker-panel-swatch{
    width: 2em;
    height: 2em;
    padding: 0;
    border-color: $buic-inputs-border;
  }
}