.custom-select {
  position: relative;

  .custom-select-trigger {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xs);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-md);
    text-align: left;

    &:focus-visible {
      outline: 2px solid var(--color-border-selected-secondary);
      outline-offset: 2px;
    }

    i {
      font-size: 12px;
      color: var(--color-text-tertiary);
      transition: transform 0.15s ease;
    }

    .custom-select-summary {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: var(--weight-regular);

      &.placeholder {
        color: var(--color-text-disabled);
        font-weight: var(--weight-light);
      }
    }
  }

  .custom-select-panel {
    position: absolute;
    z-index: 2;
    top: calc(100% + 4px);
    width: 100%;
    max-height: 350px;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    padding: 8px;
    box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04);

    .custom-select-select-all {
      border-bottom: 1px solid var(--color-border-secondary);
      margin-bottom: 4px;
      padding-bottom: 8px !important;
      font-weight: var(--weight-medium);
    }

    .custom-select-group-title {
      font-size: 11px;
      font-weight: var(--weight-semi-bold);
      color: var(--color-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 10px 2px 4px 2px;
    }

    .custom-select-option {
      padding: 5px 2px;
    }
  }

  &.open {
    .custom-select-trigger {
      border-color: var(--color-border-selected);

      i {
        transform: rotate(180deg);
      }
    }
  }
}

.custom-select {
  .custom-select-bottom-drawer {
    display: block !important; /* override .hidden { display: none !important } */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1011;
    max-height: 75dvh;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    padding: 16px 16px 32px;
    box-shadow: 0 -4px 24px rgba(10, 13, 18, 0.12);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;

    &:not(.hidden) {
      transform: translateY(0);
      pointer-events: auto;
    }

    .custom-select-drawer-close {
      display: block;
      margin-left: auto;
      background: none;
      border: none;
      padding: 0;
      font-size: var(--font-size-sm);
      font-weight: var(--weight-semi-bold);
      color: var(--color-text-tertiary);
      cursor: pointer;

      &:hover {
        color: var(--color-text-primary);
      }
    }

    .custom-select-group-title {
      font-size: 11px;
      font-weight: var(--weight-semi-bold);
      color: var(--color-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 10px 2px 4px 2px;
    }

    .custom-select-option {
      min-height: 48px;
      padding: 5px 2px;
      border-bottom: 1px solid var(--color-border-secondary);

      &:last-child {
        border-bottom: none;
      }
    }
  }
}