@import '../../styles/variables.scss';

@mixin arrow-dark {
  // уголок вниз
  .ark-ui-select-arrow {
    background: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6.5L8 10.5L4 6.5' stroke='%23585B69' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat;
  }
}

.ark-ui-select-title {
  color: #585B69;
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 8px;
}

.ark-ui-select {
  box-sizing: border-box;
  color: $font-color;
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  position: relative;
  .ark-ui-select-head {
    border: 1px solid #D3D5E5;
    border-radius: 4px;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    padding: 12px 16px;
    position: relative;
    height: 40px;
    &:has(.ark-ui-select-head-value) {
      @include arrow-dark;
    }
  }

  .ark-ui-select-loader-wrapper {
    height: 4px;
  }

  &.S {
    .ark-ui-select-head {
      height: 32px;
      padding: 8px 12px;
    }

    .ark-ui-select-head-clear {
      right: 36px;
    }

    .ark-ui-select-arrow {
      top: 8px;
      right: 8px;
    }

    &.is-opened {
      .ark-ui-select-dropdown {
        top: 34px;
      }
    }

  }

  .ark-ui-select-head-value {
    color: #27282E;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    width: 80%;
  }
  .ark-ui-select-head-clear {
    background: url(./assets/cross.svg) center center no-repeat;
    height: 8px;
    width: 8px;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px;

    &:hover {
      filter: contrast(0) brightness(0) saturate(0);
    }
  }
  .ark-ui-select-head-chips {
    background: $gray-200;
    border-radius: 4px;
    display: flex;
    margin: -4px 4px -4px 0;
    padding: 4px 4px 4px 8px;
    max-width: 50%;
    gap: 8px;
    width: fit-content;
    min-width: fit-content;
  }
  .ark-ui-select-head-placeholder {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #A3A7B9;
    max-width: 90%;
  }
  .ark-ui-select-head-value, .ark-ui-select-head-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ark-ui-select-head-chips-clear {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjA5MDkxIDQuMjQyMzlDNC44NTY2IDQuMDA4MDcgNC40NzY3IDQuMDA4MDcgNC4yNDIzOSA0LjI0MjM5QzQuMDA4MDcgNC40NzY3IDQuMDA4MDcgNC44NTY2IDQuMjQyMzkgNS4wOTA5MUw3LjM1Mzc3IDguMjAyM0w0LjI0MjM5IDExLjMxMzdDNC4wMDgwNyAxMS41NDggNC4wMDgwNyAxMS45Mjc5IDQuMjQyMzkgMTIuMTYyMkM0LjQ3NjcgMTIuMzk2NSA0Ljg1NjYgMTIuMzk2NSA1LjA5MDkxIDEyLjE2MjJMOC4yMDIzIDkuMDUwODJMMTEuMzEzNSAxMi4xNjJDMTEuNTQ3OCAxMi4zOTYzIDExLjkyNzcgMTIuMzk2MyAxMi4xNjIgMTIuMTYyQzEyLjM5NjMgMTEuOTI3NyAxMi4zOTYzIDExLjU0NzggMTIuMTYyIDExLjMxMzVMOS4wNTA4MiA4LjIwMjNMMTIuMTYyIDUuMDkxMTNDMTIuMzk2MyA0Ljg1NjgyIDEyLjM5NjMgNC40NzY5MiAxMi4xNjIgNC4yNDI2MUMxMS45Mjc3IDQuMDA4MjkgMTEuNTQ3OCA0LjAwODI5IDExLjMxMzUgNC4yNDI2MUw4LjIwMjMgNy4zNTM3N0w1LjA5MDkxIDQuMjQyMzlaIiBmaWxsPSIjMjQyQTJGIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4=) center center no-repeat;
    cursor: pointer;
    height: 16px;
    width: 16px;
    min-width: 12px;
  }
  .ark-ui-select-selected {
    height: 16px;
    padding: 12px 16px 12px 24px;
  }
  .ark-ui-select-head-controls {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: max-content;
  }
  .ark-ui-select-arrow {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjE5MDEzIDYuNTY1MjJDNC40OTkyOSA2LjI1NjA1IDUuMDAwNTUgNi4yNTYwNSA1LjMwOTcxIDYuNTY1MjJMOS40OTk5MiAxMC43NTU0TDEzLjY5MDEgNi41NjUyMkMxMy45OTkzIDYuMjU2MDUgMTQuNTAwNSA2LjI1NjA1IDE0LjgwOTcgNi41NjUyMkMxNS4xMTg5IDYuODc0MzggMTUuMTE4OSA3LjM3NTY0IDE0LjgwOTcgNy42ODQ4TDEwLjA1OTcgMTIuNDM0OEM5Ljc1MDU1IDEyLjc0NCA5LjI0OTI5IDEyLjc0NCA4Ljk0MDEzIDEyLjQzNDhMNC4xOTAxMyA3LjY4NDhDMy44ODA5NiA3LjM3NTY0IDMuODgwOTYgNi44NzQzOCA0LjE5MDEzIDYuNTY1MjJaIiBmaWxsPSIjOURBNkI2Ii8+Cjwvc3ZnPg==) center center no-repeat;
    height: 16px;
    width: 16px;
    transition: 0.4s;
    cursor: pointer;
  }
  .ark-ui-select-dropdown-search {
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 12px 16px;
    border-bottom: 1px solid #F6F6F7;
  }
  input {
    background: white;
    border: none;
    width: 100%;
    &:focus {
      outline: none;
    }
    &::placeholder {
      color: #BDBFC1;
    }
  }
  .ark-ui-select-items-list {
    position: relative;
    background-color: white;
    overflow-y: scroll;
    border-radius: 4px;
  }
  .ark-ui-select-item {
    display: flex;
    align-items: flex-start;
    column-gap: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    padding: 12px 16px 12px 24px;
    &-description-id {
      margin-top: 2px;
      color: $gray-400;
      font-size: 12px;
      line-height: 18px;
    }
    &:hover {
      background-color: #F6F6FA;
    }
    &.is-selected {
      background-color: #E0F6F8;
    }
  }
  &:hover .ark-ui-select-head {
    border-color: #A3A7B9;
    @include arrow-dark;
    transition: none;
  }

  &.with-copy .ark-ui-select-head {
    cursor: copy !important;
  }

  &.is-opened {
    .ark-ui-select-head {
      border-color: #BDBFC1;
    }

    input {
      font-size: 14px;
      color: #585B69;

      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

      &::placeholder {
        font-size: 14px;
        color: #A3A7B9;
      }
    }

    .ark-ui-select-dropdown {
      position: absolute;
      top: 42px;
      border-radius: 4px;
      box-sizing: border-box;
      box-shadow: 0 8px 16px rgba(75, 77, 89, 0.08);
      width: 100%;
      background: #FFFFFF;
      z-index: $dropdown;
    }
    .ark-ui-select-arrow {
      transform: rotateX(180deg);
    }
    .ark-ui-select-clear {
      transform: none;
    }
  }
  &.with-errors .ark-ui-select-head {
    border-color: $red;
  }
  &.is-disabled {
    cursor: default;

    .ark-ui-select-head {
      color: #BDBFC1;
      background: #F6F6FA;
      border-color: #F6F6FA;
    }
  }
  .ark-ui-pagination-trigger-down {
    min-height: 2px;
  }
  .ark-ui-select-empty-block {
    padding: 12px 16px;
    font-size: 12px;
    color: #A3A7B9;
    text-align: center;
  }
}

.ark-ui-select-highlight {
  background-color: #E0F6F8;
}

.default-table-header {
  position: relative;
  padding: 0 16px;
  cursor: default;

  .ark-ui-select {
    position: inherit;
    cursor: default;

    &.S {
      .table-icon-type-search {
        top: 4px;
      }
    }

    &-item {
      padding: 12px 16px;

      &.is-selected {
        background-color: #ECF9FA;
      }

      &:hover {
        background-color: #F6F6FA;
      }
    }

    &-item,
    input {
      color: #585B69;
      font-size: 14px;
      font-weight: 400;
    }

    &-title {
      display: none;
    }

    &-head {
      display: grid;
      grid-auto-flow: column;
      cursor: default;
      height: 48px;
      padding: 0;
      background: #F6F6FA;
      border: none;

      &-placeholder {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        color: #585B69;
        font-weight: 500;
      }

      &-value {
        color: #585B69;
      }

      &-chips {
        background: white;
        padding: 4px 8px;
        margin-right: 8px;
        align-items: center;
        min-width: min-content;

        &-clear {
          background-size: cover;
        }
      }
    }

    &-arrow {
      top: 15px;
      right: 12px;
      transition: .4s;

      &.table-icon-type-search {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4wNzg2IDEyLjAyMTJDMTAuMDUyMiAxMi44NDIzIDguNzUwMTcgMTMuMzMzMyA3LjMzMzUgMTMuMzMzM0M0LjAxOTc5IDEzLjMzMzMgMS4zMzM1IDEwLjY0NyAxLjMzMzUgNy4zMzMyNUMxLjMzMzUgNC4wMTk1NCA0LjAxOTc5IDEuMzMzMjUgNy4zMzM1IDEuMzMzMjVDMTAuNjQ3MiAxLjMzMzI1IDEzLjMzMzUgNC4wMTk1NCAxMy4zMzM1IDcuMzMzMjVDMTMuMzMzNSA4Ljc0OTkzIDEyLjg0MjUgMTAuMDUxOSAxMi4wMjE0IDExLjA3ODRMMTQuNDcxNiAxMy41Mjg2QzE0LjczMiAxMy43ODg5IDE0LjczMiAxNC4yMTEgMTQuNDcxNiAxNC40NzE0QzE0LjIxMTMgMTQuNzMxNyAxMy43ODkxIDE0LjczMTcgMTMuNTI4OCAxNC40NzE0TDExLjA3ODYgMTIuMDIxMlpNMi42NjY4MyA3LjMzMzI1QzIuNjY2ODMgNC43NTU5MiA0Ljc1NjE3IDIuNjY2NTkgNy4zMzM1IDIuNjY2NTlDOS45MTA4MyAyLjY2NjU5IDEyLjAwMDIgNC43NTU5MiAxMi4wMDAyIDcuMzMzMjVDMTIuMDAwMiA4LjU5MDY3IDExLjUwMjkgOS43MzE5NCAxMC42OTQyIDEwLjU3MTFDMTAuNjcxNSAxMC41ODg2IDEwLjY0OTYgMTAuNjA3NyAxMC42Mjg4IDEwLjYyODZDMTAuNjA4IDEwLjY0OTQgMTAuNTg4OCAxMC42NzEyIDEwLjU3MTMgMTAuNjkzOUM5LjczMjE4IDExLjUwMjYgOC41OTA5MiAxMS45OTk5IDcuMzMzNSAxMS45OTk5QzQuNzU2MTcgMTEuOTk5OSAyLjY2NjgzIDkuOTEwNTggMi42NjY4MyA3LjMzMzI1WiIgZmlsbD0iI0JEQkZDMSIvPgo8L3N2Zz4=) center center no-repeat !important;
        transition: none;
        transform: none;
      }
    }

    &-dropdown {
      top: unset !important;
      box-shadow: 0 8px 16px rgba(75, 77, 89, 0.08) !important;

      &-search {
        padding: 12px 16px;
        border-bottom: 1px solid #F6F6FA;
      }
    }

    &.is-opened {
      .ark-ui-select {
        &-head {
          background-color: #F0F1F7;
        }
      }
    }
  }
  &:has(.ark-ui-select.is-opened),
  &:hover {
    // background-color: #F0F1F7;

    path {
      fill: #585B69 !important;
    }

    .ark-ui-select {
      &-head {
        // background-color: #F0F1F7;
      }

      &-arrow.table-icon-type-search {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC44NzQ0IDExLjU4MTVDOS44MjkwOCAxMi40NjY0IDguNDc2ODUgMTMgNyAxM0MzLjY4NjI5IDEzIDEgMTAuMzEzNyAxIDdDMSAzLjY4NjI5IDMuNjg2MjkgMSA3IDFDMTAuMzEzNyAxIDEzIDMuNjg2MjkgMTMgN0MxMyA4LjQ3Njg1IDEyLjQ2NjQgOS44MjkwOCAxMS41ODE1IDEwLjg3NDRMMTMuODUzNiAxMy4xNDY0QzE0LjA0ODggMTMuMzQxNyAxNC4wNDg4IDEzLjY1ODMgMTMuODUzNiAxMy44NTM2QzEzLjY1ODMgMTQuMDQ4OCAxMy4zNDE3IDE0LjA0ODggMTMuMTQ2NCAxMy44NTM2TDEwLjg3NDQgMTEuNTgxNVpNMTIgN0MxMiA5Ljc2MTQyIDkuNzYxNDIgMTIgNyAxMkM0LjIzODU4IDEyIDIgOS43NjE0MiAyIDdDMiA0LjIzODU4IDQuMjM4NTggMiA3IDJDOS43NjE0MiAyIDEyIDQuMjM4NTggMTIgN1oiIGZpbGw9IiM1ODVCNjkiLz4KPC9zdmc+Cg==) center center no-repeat !important;
        &:hover {
          width: 24px;
          height: 24px;
          background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iMiIgZmlsbD0iI0QzRDVFNSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0Ljg3NDQgMTUuNTgxNUMxMy44MjkxIDE2LjQ2NjQgMTIuNDc2OSAxNyAxMSAxN0M3LjY4NjI5IDE3IDUgMTQuMzEzNyA1IDExQzUgNy42ODYyOSA3LjY4NjI5IDUgMTEgNUMxNC4zMTM3IDUgMTcgNy42ODYyOSAxNyAxMUMxNyAxMi40NzY5IDE2LjQ2NjQgMTMuODI5MSAxNS41ODE1IDE0Ljg3NDRMMTcuODUzNiAxNy4xNDY0QzE4LjA0ODggMTcuMzQxNyAxOC4wNDg4IDE3LjY1ODMgMTcuODUzNiAxNy44NTM2QzE3LjY1ODMgMTguMDQ4OCAxNy4zNDE3IDE4LjA0ODggMTcuMTQ2NCAxNy44NTM2TDE0Ljg3NDQgMTUuNTgxNVpNMTYgMTFDMTYgMTMuNzYxNCAxMy43NjE0IDE2IDExIDE2QzguMjM4NTggMTYgNiAxMy43NjE0IDYgMTFDNiA4LjIzODU4IDguMjM4NTggNiAxMSA2QzEzLjc2MTQgNiAxNiA4LjIzODU4IDE2IDExWiIgZmlsbD0iIzU4NUI2OSIvPgo8L3N2Zz4K) center center no-repeat !important;
        }
      }
    }
  }
}

.ark-ui-select-error {
  position: absolute;
  margin-top: 4px;
  color: $red;
  font-size: 12px;
}

.ark-ui-select-multiple-checkbox {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiByeD0iMyIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzc3RDZERiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxyZWN0IHg9IjYiIHk9IjYiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHJ4PSIyIiBmaWxsPSIjNzdENkRGIi8+Cjwvc3ZnPgo=") !important;
  background-repeat: no-repeat !important;
}