@import './token.less';

@colorPicker-prefix-cls: ~'@{prefix}-color-picker';

.@{colorPicker-prefix-cls} {
  position: relative;
  // display: inline-block;
  box-sizing: border-box;
  width: 100%;
  // height: 34px;
  font-size: 14px;

  &-trigger {
    box-sizing: border-box;
    height: 100%;
    border: 1px solid var(--color-neutral-3);
    border-radius: 3px;
    cursor: pointer;

    &__fill {
      position: absolute;
      top: 4px;
      right: 4px;
      bottom: 4px;
      left: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
    }

    &__value {
      position: relative;
      color: #fff;
      white-space: nowrap;
    }
  }

  &-panel {
    width: 240px;
    margin: 4px 0;
    color: var(--color-text-1);
    font-size: 14px;
    background-color: var(--color-bg-5);
    border-radius: 3px;
    box-shadow: @shadow2-down;
  }
  // Size
  &-small {
    width: @size-small;
    height: @size-small;
    font-size: @font-size-body-1;
  }

  &-medium {
    width: @size-medium;
    height: @size-medium;
    font-size: @font-size-body-3;
  }

  &-default {
    width: @size-default;
    height: @size-default;
    font-size: @font-size-body-3;
  }
}
.@{colorPicker-prefix-cls}-control {
  padding: 12px;
}

.@{colorPicker-prefix-cls}-input {
  .w-input-wrapper {
    padding-right: 2px;
    padding-left: 2px;
  }

  &__mode {
    width: 50px;
  }
}

.@{colorPicker-prefix-cls}-checkboard {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  border-radius: 3px;
}