@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: absolute;
  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);

  &__tools {
    display: flex;
    margin: 6px 0;

    .tiny-input {
      flex: 1 0 0;
    }

    &-btns {
      margin-left: 8px;
    }

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

  &__inner {
    display: flex;
    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: 8px;
      border-radius: var(--tv-ColorSelectPanel-border-radius-lg);
      background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

      div {
        position: absolute;
        top: 0;
        width: 100%;
        height: 4px;
        background: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
        border-radius: 1px;
      }
    }
  }

  &__alpha {
    position: relative;
    min-width: 240px;
    height: 8px;
    border-radius: var(--tv-ColorSelectPanel-border-radius-lg);
    margin-top: var(--tv-ColorSelectPanel-alpha-margin-top);

    &__slider {
      width: 100%;
      height: 100%;
      border-radius: var(--tv-ColorSelectPanel-border-radius-lg);
    }

    &__thumb {
      width: 4px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #fff;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
      border-radius: 1px;
    }
  }

  .tiny-collapse {
    .tiny-collapse-item__content {
      border: 0;
      padding: 12px;

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

        &__color-block {
          width: 20px;
          height: 20px;
          border-radius: var(--tv-ColorSelectPanel-border-radius-sm);
          margin: 0 4px 4px 0;
        }
      }
    }
  }
}
