@import '../scss/init.scss';

$chips_item_bg: #E0E0E0;
$chips_item_text: $c_text_black_primary;
$chips_clearBtn_bg: #A6A6A6;
$chips_clearBtn_text: $c_text_white_secondary;

.Select {
  position: relative;
}

.Select-value {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: $s_gutter / 2;
}

.Select-control {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: 40px;

  transition: 300ms;
  background-image: linear-gradient(to top,
                      $c_primary 2px, transparent 2px),
                    linear-gradient(to top,
                      $c_divider 1px, transparent 1px);

  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0 100%, 100% 100%;
}

.Select-multi-value-wrapper {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.is-focused > .Select-control {
  background-size: 100% 100%, 100% 100%;
}

.is-searchable.is-open > .Select-control {
  cursor: text;
}

.is-searchable.is-focused:not(.is-open) > .Select-control {
  cursor: text;
}

.Select-placeholder {
  position: absolute;
  height: 32px;
  display: flex;
  align-items: center;
  color: $c_text_secondary;
}

.Select-input {
  height: 32px;
  display: block !important;
  outline: none;
}

.Select-input > input {
  width: 100%;
  background: none;
  border: none;
  cursor: default;
  outline: none;
  height: 100%;
}

.is-focused .Select-input > input {
  cursor: text;
}

.Select-arrow-zone {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8, <svg fill="#{$c_divider}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M7 10l5 5 5-5z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg>'); }

.Select-menu-outer {
  position: absolute;
  overflow: hidden;
  margin-top: 8px;
  max-height: 200px;
  width: 100%;
  z-index: $z_dialog;

  @include allowScroll;
  @include depth(8);
  @include roundCorner;
  background: $c_paper;
}

.Select-menu {
  max-height: 200px;
  overflow-y: auto;
}

.Select-option {
  color: $c_text_secondary;
  cursor: pointer;
  padding: $s_gutter $s_gutter/2;
}

.Select-option.is-selected {
  background-color: tint($c_accent, 15%);
  color: $c_text_primary;
}

.Select-option.is-focused {
  background-color: $c_accent;
  color: $c_text_white_primary;
}

.Select-option.is-disabled {
  color: $c_text_tertiary;
  cursor: not-allowed;
}

.Select-noresults {
  color: $c_text_secondary;
  cursor: default;
  display: block;
  padding: $s_gutter;
}

.Select--multi.has-value .Select-input {
  margin-left: 4px;
}

.Select--multi .Select-value {
  background-color: $chips_item_bg;
  color: $chips_item_text;
  display: flex;
  align-items: center;
  height: 32px;
  padding-left: 12px;
  padding-right: 4px;
  border-radius: 16px;
  margin-right: $s_gutter/2;
}

.Select--multi .Select-value-icon {
  cursor: pointer;
  order: 1;
  width: 24px;
  height: 24px;
  @include center;
  @include circle;
  background: $chips_clearBtn_bg;
  font-size: 0;
  margin-left: $s_gutter/2;
  position: relative;

  background-image: url('data:image/svg+xml;utf8, <svg fill="#{$chips_clearBtn_text}" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.Select--multi.is-disabled .Select-value {
  padding-right: 12px;
}