@import "../variables.css";
@import "../media.css";
@import "../helpers.css";

:root {
  --select-border-color: var(--grey-ll);
  --select-border-radius: 0;
}

span .selection {
  display: block;
  height: 55px;
}

select[data-select-catalog] + .select2-container {
  border: 1px solid var(--grey-ll);
  min-height: 50px;

  .selection {
    .select2-selection {
      padding: 20px;
    }
  }
}

select[data-select-cart] + .select2-container {
  border: 1px solid var(--grey-ll);
  min-height: 50px;
  margin-bottom: 20px;

  .selection {
    .select2-selection {
      padding: 20px;
    }
  }
}

.mark-label {
  position: relative;
}

select {
  visibility: hidden;
  position: absolute;
  max-width: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
}

.select2-selection {
  height: 100%;
  background: #fff;
  padding: 0 14px 16px 14px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  cursor: pointer;

  .select-label {
    position: absolute;
    left: 17px;
    top: 23px;
  }

  @media (max-width: 768px) {
    padding: 0 0 10px 15px;
  }

  &:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--grey);
  }

  &__rendered {
    max-width: 190px;
    color: var(--text);
    min-height: auto;
    font-size: 16px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

  }
}

.select2-selection[aria-expanded=true].select2-selection:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid var(--grey);
  top: 24px !important;
}

.select2-container {
  display: block;
  background-color: #fff;
  min-height: 60px;
  min-width: initial;
  width: 100% !important;
  border: 1px solid #D8E1E4;
}

.select2-container {
  .selection {
    .select2-selection[aria-expanded=true].select2-selection:after {
      top: 20px;
    }
  }
}

.select2-results__options {
    position: relative;
    max-height: 228px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) var(--grey-l);
}

.select2-results__options::-webkit-scrollbar {
  width: 12px;
  cursor: pointer;

  @media (--max767) {
    width: 6px;
  }
}
.select2-results__options::-webkit-scrollbar-thumb {
  width: 12px;
  background-color: var(--blue);
  cursor: pointer;

  @media (--max767) {
    width: 6px;
  }
}

.select2-results__options::-webkit-scrollbar-track {
  width: 12px;
  background: var(--grey-l);

  @media (--max767) {
    width: 6px;
  }
}

.select2-results__option {
  padding: 8px 20px 8px 10px;
  width: 100%;
  cursor: pointer;

&:empty {
   padding: 0;
 }

&:hover {
   color: #136793;
   font-weight: 600;
   letter-spacing: -.6px;
 }
}

.select2-results__option--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.select2-results__options.select-catalog-option {
.select2-results__option {
&:first-of-type {
   padding: 8px 40px 8px 10px;
 }
}
}

.select2-search__field {
  width: 100%;
  min-height: 30px;
  height: 30px;
  margin-bottom: 5px;
  padding: 15px 20px 12px 5px;
  border: 1px solid #D8E1E4;
  transition: border .2s, background-color .2s;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;

&:hover {
   color: #136793;
   border: 1px solid #136793;
  font-weight: 600;
 }
}

select {
  padding: 0 15px;
  -webkit-appearance: none;
  -moz-appearance: none;

  &::-ms-expand {
    display: none;
  }
}

/* Обертка выбранного пункта */
.select {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding-right: 15px;
  border-radius: var(--select-border-radius);
  border: 1px solid var(--select-border-color);
  background-color: #fff;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  transition: border-color .2s;

  @extend .toggle-arrow;

  @media (--max767) {
    font-size: 14px;
  }

  &:before {
    right: 20px;
  }

  &-label {
    font-size: 16px;
    line-height: 1;
    color: var(--grey-3);

    &:not(.active) {
      & ~ .label {
        display: none;
      }
    }
  }

  & > .label { /* активный пункт */
    display: block !important;
    width: 100%;
    min-height: calc(var(--input-height-d) - 2px);
    line-height: calc(var(--input-height-d) - 2px);
    align-items: center;
    padding: 0 var(--input-pl);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;

    @media (--max767) {
      padding-left: 15px;
    }
  }

  &-wrapper { /* общая обертка */
    width: 100%;
    position: relative;
    cursor: pointer;

    &.error:not(.select-open) {

      .select {
        border-color: var(--red);
      }
    }

    & + input {
      margin-top: 10px;
    }
  }

  &-hide-select {
    display: none;
  }

  &-items { /* drowpown list */
    display: none;
  }

  &-input {
    display: none;
  }
  &__placeholder {
    color: var(--blue);
  }
}

.select2.select2-container {

  .select2-selection__rendered {
    width: 100%;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}