.picker-container {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  column-gap: 1rem;


  & .picker-swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 2px;
    border: 1px solid var(--textColor);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    font-size: 1.1rem;
  }
}

.setting-colorpicker-panel {
  position: absolute;
  z-index: 10;


  & .react-colorful__pointer {
    width: 14px;
    height: 14px;
  }

  & .react-colorful__hue,
  & .react-colorful__alpha {
    height: 18px;
    border-radius: 0;
  }

  & .setting-colorpicker-options {
    width: 200px;
    display: flex;
    & input {
      letter-spacing: 1px;
      width: 136px;
      background: var(--backdropColor, var(--backgroundColor))
    }

    & div[role="button"] {
      width: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--primaryColor);
      color: white;

    }
  }
}
