@import './color-picker.functions.scss';

$red: #ff3300;
$green: #33cc33;
$blue: #336699;
$slider: #cdcdcd;

.rgb-picker {
  display: grid;
  grid-template-columns: 2fr auto;
  grid-column-gap: 1rem;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
  position: relative;
  padding: 16px;
  border-radius: 5px;
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);

  .sliders {
    display: grid;
    grid-template-rows: repeat(4, minmax(auto 1fr));
    row-gap: 1rem;

    .red-slider {
      @include color-slider($red,
        $slider);
    }

    .green-slider {
      @include color-slider($green,
        $slider);
    }

    .blue-slider {
      @include color-slider($blue,
        $slider);
    }

    .short-slider {
      @include slider();
    }

    .hex-input-container {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-column-gap: 3px;

      .hex-input {
        border-top-color: initial;
        border-top-style: none;
        border-top-width: initial;
        border-right-color: initial;
        border-right-style: none;
        border-right-width: initial;
        border-bottom-color: gray;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-left-color: initial;
        border-left-style: none;
        border-left-width: initial;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        animation-name: cdk-text-field-autofill-end;
        -webkit-appearance: none;
        font: inherit;
        background: 0 0;
        color: currentColor;
        outline: 0;
        padding: 0 0 0.25rem 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        vertical-align: bottom;
        text-align: inherit;
        caret-color: var(--P-500);
        -webkit-writing-mode: horizontal-tb !important;
        text-rendering: auto;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        background-color: white;
        -webkit-rtl-ordering: logical;
        cursor: text;
      }
    }
  }

  .preview-container {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-row-gap: 1rem;

    .color-preview {
      border: 1px solid lightgray;
      border-radius: 50%;
      width: 75px;
      height: 75px;
      margin-top: 0.25rem;
    }
  }
}