@import (reference) './Icon';

.sp-hidden,
.sp-initial {
  display: none;
}

.sp-replacer {
  cursor: pointer;
  max-width: 100%;
  padding: var(--gap-s) calc(var(--gap-s) + var(--Icon-size)) var(--gap-s) 0;
  position: relative;
  user-select: none;
  width: 200px;

  &::before {
    background: var(--Input-borderColor);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
  }

  &.sp-active {
    background: var(--Input-focusBackground);

    &::before {
      background: var(--Input-focusColor);
      height: 2px;
    }
  }

  &:hover,
  &:focus {
    &::before {
      background: var(--Input-focusColor);
    }

    .sp-dd {
      color: var(--Input-focusColor);
    }
  }

  .SearchWidget-filter & {
    width: 100%;
  }
}

.sp-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
  width: 100%;

  &::before {
    content: '';
  }

  &[data-placeholder]::after {
    content: attr(data-placeholder);
    font-style: italic;
    padding-left: 30px;
  }

  &[data-color]::after {
    content: attr(data-color);
    font-style: normal;
    padding-left: 30px;
  }

  &[data-placeholder]:not([data-color])::after {
    color: var(--color-gray5);
  }
}

.sp-preview::before,
.sp-preview-inner {
  border-radius: 50%;
  height: var(--Text-height);
  left: 0;
  position: absolute;
  top: var(--gap-s);
  width: var(--Text-height);
}

.sp-preview:not([data-placeholder^='#']) {
  .sp-preview-inner.sp-clear-display::before {
    .Icon;

    content: 'block';
    font-size: var(--Text-height);
    top: 0;
  }
}

.sp-dd {
  bottom: calc(var(--gap-s) + (var(--Text-height) - var(--Icon-size)) / 2);
  height: var(--Icon-size);
  overflow: hidden;
  position: absolute;
  right: var(--gap-s);
  width: var(--Icon-size);

  &::before {
    .Icon;

    content: 'arrow_drop_down';
    top: 0;
    transition: transform var(--time-xs);

    .sp-active & {
      color: var(--Input-focusColor);
      transform: rotate(-180deg);
    }
  }
}

.sp-container {
  background: var(--color-white);
  box-shadow: var(--shadow-3);
  padding: var(--gap-m);
  width: auto;
  z-index: 100001;

  &,
  button {
    user-select: none;
  }
}

.sp-top {
  position: relative;
  width: 100%;
}

.sp-fill {
  padding-top: 100%;
}

.sp-color {
  bottom: calc(var(--gap-s) + var(--Icon-size));
  left: 0;
  position: absolute;
  right: calc(var(--gap-s) + var(--Icon-size));
  top: 0;
}

.sp-sat,
.sp-val {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.sp-sat {
  background-image: linear-gradient(to right, #fff, rgb(204 154 129 / 0%));
}

.sp-val {
  background-image: linear-gradient(to top, #000, rgb(204 154 129 / 0%));
}

.sp-dragger,
.sp-slider,
.sp-alpha-handle {
  background: var(--color-white);
  border: 1px solid var(--color-black);
  cursor: pointer;
  opacity: 0.5;
  position: absolute;
  user-select: none;
}

.sp-dragger {
  border-radius: 50%;
  height: 10px;
  left: 0;
  top: 0;
  width: 10px;
}

.sp-clear {
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;

  &::before {
    .Icon;

    content: 'block';
  }
}

.sp-hue {
  background: linear-gradient(
    to bottom,
    #f00 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  );
  bottom: calc(var(--gap-s) + var(--Icon-size));
  position: absolute;
  right: 0;
  top: calc(var(--Icon-size) + var(--gap-s));
  width: var(--Icon-size);
}

.sp-slider {
  height: 7px;
  left: -1px;
  right: -1px;
  top: 0;
}

.sp-alpha {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==')
    center;
  bottom: 0;
  display: none;
  height: var(--Icon-size);
  left: 0;
  position: absolute;
  right: 0;
  user-select: none;
}

.sp-alpha-inner {
  height: 100%;
  width: 100%;
}

.sp-alpha-handle {
  bottom: -1px;
  left: 50%;
  top: -1px;
  width: 7px;
}

.sp-input-container {
  margin: calc(0px - var(--gap-m)) 0 var(--gap-m) 0;
}

.sp-container .sp-input {
  box-sizing: border-box;
}

.sp-cancel {
  float: right;
  line-height: calc(var(--gap-s) * 2 + var(--Text-height));
}

.sp-palette {
  max-width: calc((var(--gap-s) + var(--gap-m)) * 4);
}

.sp-picker-container {
  float: left;
}

.sp-palette-container {
  float: right;
  position: relative;
}

.sp-cf::before,
.sp-cf::after {
  content: '';
  display: table;
}

.sp-container * {
  box-sizing: content-box;
}

.sp-palette .sp-thumb-el {
  cursor: pointer;
  display: block;
  float: left;
  height: var(--gap-l);
  margin: 0 0 var(--gap-s) var(--gap-s);
  position: relative;
  width: var(--gap-l);
}

.sp-preview,
.sp-alpha,
.sp-thumb-el {
  position: relative;
}

.sp-preview-inner,
.sp-alpha-inner,
.sp-thumb-inner {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.sp-palette .sp-thumb-inner {
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.sp-palette-button-container {
  display: none;
}
