/* @use '~@payloadcms/ui/scss' as *; */
/* using tsdown */
/* @use '~@payloadcms/ui/dist/scss/styles.scss' as *; */

.add-color.btn {
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
}

.custom-color-picker {
  &__btn.btn {
    margin: calc(var(--base) * 0.25);

    &:first-of-type {
      margin-left: unset;
    }
  }

  &__input {
    // Payload exports a mixin from the vars file for quickly applying formInput rules to the class for our input
    /* @include formInput; */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);

    &:not(:disabled) {
      &:hover {
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
      }
    }

    font-family: var(--font-body);
    width: 100%;
    border: 1px solid var(--theme-elevation-150);
    border-radius: var(--style-radius-s);
    background: var(--theme-input-bg);
    color: var(--theme-elevation-800);
    font-size: 1rem;
    height: base(2);
    line-height: base(1);
    padding: base(0.4) base(0.75);
    -webkit-appearance: none;
    transition-property: border,
    box-shadow,
    background-color;
    transition-duration: 100ms,
    100ms,
    500ms;
    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);

    &[data-rtl='true'] {
      direction: rtl;
    }

    &::-webkit-input-placeholder {
      color: var(--theme-elevation-400);
      font-weight: normal;
      font-size: 1rem;
    }

    &::-moz-placeholder {
      color: var(--theme-elevation-400);
      font-weight: normal;
      font-size: 1rem;
    }

    &:hover {
      border-color: var(--theme-elevation-250);
    }

    &:focus,
    &:focus-within,
    &:active {
      border-color: var(--theme-elevation-400);
      outline: 0;
    }

    &:disabled {
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-400);
      box-shadow: none;

      &:hover {
        border-color: var(--theme-elevation-150);
        box-shadow: none;
      }
    }
  }

  &__colors {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
  }
}

.chip {
  border-radius: 50%;
  border: 2px solid #fff;
  height: calc(var(--base) * 1.25);
  width: calc(var(--base) * 1.25);
  margin-right: calc(var(--base) * 0.5);
  box-shadow: none;

  &--selected {
    box-shadow: 0 0 0 2px #333333;
  }

  &--clickable {
    cursor: pointer;
  }
}