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

@color-select-panel-prefix-cls: ~'@{css-prefix}color-select-panel';
.@{color-select-panel-prefix-cls} {
  .component-css-vars-color-select-panel();
    display: flex;
    flex-direction: column;
    position: absolute;
    max-width: 300px;
    z-index: var(--ti-color-select-panel__wrapper-zindex);
    background: var(--ti-color-select-panel__wrapper-bg-color);
    gap: var(--ti-color-select-panel-spacing);
    padding: var(--ti-color-select-panel-padding-vertical) var(--ti-color-select-panel-padding-horizontal);
    box-shadow: var(--ti-color-select-panel-box-shadow);

    &__tools {
      display: flex;

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

      .tiny-button-group {
        flex: 0 0 auto;
      }
    }

    &__inner {
      display: flex;
      gap: 12px;
      &__color-select {
        width: 280px;
        height: 180px;
        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, .15);
          box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
        }
      }

      &__hue-select {
        position: relative;
        width: 18px;
        border-radius: var(--ti-color-select-panel-border-radius-xs);
        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, .6);
          border-radius: 1px;
        }
      }
    }

    &__alpha {
      position: relative;
      width: 100%;
      height: 20px;
      border-radius: var(--ti-color-select-panel-border-radius-xs);
      margin-top: var(--ti-color-select-panel-alpha-margin-top);
      &__slider {
        width: 100%;
        height: 100%;
      }

      &__thumb {
        width: 4px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, .6);
        border-radius: 1px;
      }
    }
    .tiny-collapse-item__wrap{
      background: transparent;
    }
    .tiny-collapse-item{
      background: transparent;
      border: none;
      padding-left: 0;
      padding-right: 0;
    }
    .tiny-collapse-item__content{
      background: transparent;
      .@{color-select-panel-prefix-cls}__history,
      .@{color-select-panel-prefix-cls}__predefine{
        display: flex;
        flex-wrap: wrap;
        height: auto;
        gap: var(--ti-color-select-panel-spacing);
        &__color-block{
          width: 20px;
          height: 20px;
          border-radius: var(--ti-color-select-panel-border-radius-sm);;
        }
      }
    }
}