@import '../custom.less';
@import './vars.less';

@color-select-panel-prefix-cls: ~'@{css-prefix}color-select-panel';

.@{color-select-panel-prefix-cls} {
  .inject-ColorSelectPanel-vars();
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 320px;
  z-index: 10;
  background: var(--tv-ColorSelectPanel-bg-color);
  gap: var(--tv-ColorSelectPanel-spacing);
  padding: var(--tv-ColorSelectPanel-padding-y) var(--tv-ColorSelectPanel-padding-x);
  box-shadow: var(--tv-ColorSelectPanel-box-shadow);
  border-radius: var(--tv-ColorSelectPanel-border-radius-md);

  &__display {
    position: absolute;
    top: 170px;
    right: 16px;
    height: 40px;
    width: 40px;
    border-radius: 4px;
  }

  &__no-alpha {
    width: 85%;
    height: 12px;
    margin-top: 12px;
  }

  &__tools {
    display: flex;
    flex-direction: row;
    gap: 8px;
    line-height: 30px;
    height: 30px;
    margin-top: 16px;

    &-style {
      flex: 1;
    }

    &-deg {
      display: flex;
      justify-content: end;
    }

    &-hex {
      display: flex;
      flex-direction: row;
      gap: 8px;
    }

    &-hex1 {
      flex: 1;
    }

    &-hex2 {
      width: 52px;
    }

    &-hex3 {
      flex: 1;
    }

    &-hex4 {
      width: 31%;
    }

    &-hex5 {
      width: 31%;
    }

    &-hex6 {
      width: 31%;
    }

    &-hex7 {
      width: 31%;
    }

    &-btns {
      display: flex;
      flex-direction: row-reverse;
      margin-left: 8px;
      margin-top: 16px;

      button {
        margin-left: 12px;
      }
    }

    .tiny-input .tiny-input__inner {
      padding-left: 6px;
      padding-right: 6px;
    }

    &__format-select {
      // tiny-select 没办法用fit-content, 暂时写死
      width: 60px;

      .tiny-select .tiny-input .tiny-input__inner {
        padding-left: 0;
        padding-right: 0;
        border-width: 0;
      }
    }
  }

  &__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;

    &__color-select {
      min-width: 220px;
      flex-grow: 1;
      height: 142px;
      position: relative;

      .white {
        background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
      }

      .black {
        background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
      }

      .white,
      .black {
        position: absolute;
        inset: 0;
      }

      .cursor {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        border: 1px solid white;
        background: rgba(0, 0, 0, 0.15);
        box-shadow:
          inset 0 0 1px 1px #0000004d,
          0 0 1px 2px #0006;
      }
    }

    &__hue-select {
      position: relative;
      width: 85%;
      height: 12px;
      border-radius: 12px;
      background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

      &-thumb {
        position: absolute;
        position: relative;
        top: -2px;
        width: 16px;
        height: 16px;
        background: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        border-radius: 16px;

        &-heart {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }

  &__linear-gradient {
    position: relative;
    width: 85%;
    height: 12px;
    border-radius: 12px;

    &__thumb {
      position: absolute;
      top: -2px;
      width: 16px;
      height: 16px;
      background: #fff;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      border-radius: 16px;

      &-heart {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &__alpha {
    position: relative;
    width: 85%;
    height: 12px;
    border-radius: 12px;
    margin-top: 12px;

    &__slider {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }

    &__thumb {
      position: relative;
      position: absolute;
      top: -2px;
      width: 16px;
      height: 16px;
      left: 0;
      background: #fff;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      border-radius: 16px;

      &-heart {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .@{color-select-panel-prefix-cls}__history,
  .@{color-select-panel-prefix-cls}__predefine {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    gap: var(--tv-ColorSelectPanel-predefine-spacing);
    padding-top: 16px;

    &__color-block {
      width: 28px;
      height: 28px;
      border-radius: var(--tv-ColorSelectPanel-border-radius-sm);
    }
  }

  .@{color-select-panel-prefix-cls}__history {
    border-bottom: 1px solid #808080;
    padding-bottom: 16px;
  }

  .@{color-select-panel-prefix-cls}__predefine-title {
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    margin-top: 13px;
  }
}