@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";
@import (reference) "./../styles/less/mixins/_border-radius.less";
@import (reference) "./../styles/less/core/_typography.less";
@import (reference) "./../styles/less/ring.less";

.np-select {
  .np-dropdown-toggle {
    padding-left: var(--size-16);
    border: 1px solid var(--color-interactive-secondary);
    color: var(--color-content-primary);
    background-color: var(--color-background-screen);

    .text-align(left);

    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--color-background-screen);
    border: 1px solid var(--color-interactive-secondary);
    border-radius: var(--radius-small);
    color: var(--color-content-primary);
    font-weight: var(--font-weight-regular);
    overflow: hidden;
    padding-left: var(--size-16);
    text-align: left;
    text-overflow: ellipsis;
    max-width: 100%;

    &:focus-visible {
      outline: none;
    }

    .np-theme-personal & {
      border-radius: var(--radius-small);
    }

    .has-error & {
      border: 1px solid var(--color-interactive-negative);
    }

    &-navy {
      --color-content-accent: @color-navy-content-accent;
      --color-content-primary: @color-navy-content-primary;
      --color-content-secondary: @color-navy-content-secondary;
      --color-background-screen: @color-navy-background-screen;
      --color-interactive-secondary: @color-navy-background-screen;
      --color-interactive-secondary-hover: @color-navy-background-screen;
    }

    &.np-btn-sm {
      .padding(right, var(--size-32));
    }

    &.np-btn-md {
      .padding(right, var(--size-40));
    }

    &.np-btn-lg {
      .padding(right, var(--size-48));
    }

    .np-select-chevron {
      .margin-shorthand(0);

      position: absolute;
      .right(var(--size-16));

      top: var(--size-16);
    }

    &.np-btn-sm .np-select-chevron {
      .right(var(--size-8));

      top: var(--size-8);
    }

    &.np-btn-lg .np-select-chevron {
      top: 27px;
    }
  }

  // Override some of Button component styles
  .btn {
    &:not(.disabled,:disabled,.btn-loading) {
      color: var(--color-content-primary);

      &:hover {
        border-color: var(--color-interactive-secondary-hover);
      }

      &:focus {
        border-color: var(--color-interactive-accent);

        .np-theme-personal & {
          border-color: var(--color-interactive-secondary);
        }
      }
    }
  }
}

.np-option-content {
  max-width: 100%;
  .d-flex:last-child {
    // We need some space at the right side for chevron icon
    max-width: calc(100% - 32px);
  }
}

.np-dropdown-menu-desktop {
  max-height: 70vh;
  max-height: 70svh;
  min-width: 160px;
  max-width: ~"calc(100vw - 32px)";
}

@media (min-height: 592px) {
  .np-dropdown-menu-desktop {
    max-height: 592px;
  }
}

.np-dropdown-menu {
  border-radius: var(--radius-small);
  overflow: auto;
  margin: 0;
  .padding-shorthand(0);

  list-style: none;
  .text-align(left);

  background-color: var(--color-background-screen);

  .np-theme-personal & {
    border-radius: var(--radius-small);
  }

  &-sm {
    width: 220px;
  }

  &-md {
    width: 300px;
  }

  &-lg {
    width: 420px;
  }

  .np-dropdown-item {
    &--focused {
      background-color: var(--color-background-neutral);
      border-radius: var(--radius-small);
    }

    > a {
      white-space: normal;
    }
  }

  > li > a {
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    display: block;
    padding: var(--size-12) var(--size-16);
    clear: both;
    border-radius: var(--radius-small);
    color: var(--color-content-primary);

    .np-theme-personal & {
      border-radius: var(--radius-small);
    }

    .np-text-body-default;
  }

  > li:first-child > a {
    .border-top-radius(3px);

    .np-theme-personal & {
      .border-top-radius(var(--radius-small));
    }
  }

  > li:last-child > a {
    .border-bottom-radius(3px);

    .np-theme-personal & {
      .border-bottom-radius(var(--radius-small));
    }
  }

  > li:not(.active, .selected):not(:has(input)) > a:not([disabled], .disabled) {
    &:hover,
    &:focus {
      color: var(--color-content-primary);
      background-color: var(--color-background-neutral);
    }

    &:active {
      color: @color-navy-content-primary;
      background-color: @color-navy-background-elevated;
    }
  }

  > .active > a,
  > .selected > a {
    &,
    &:hover,
    &:focus {
      color: @color-navy-content-primary;
      background-color: @color-navy-background-elevated;
    }

    strong {
      color: inherit;
    }

    .np-text-body-default {
      color: @color-navy-content-secondary;
    }
  }

  .np-select-filter,
  .input-group-addon {
    border: 0;
  }

  .np-separator {
    height: 1px;
    margin: 0;
    overflow: hidden;
    background-color: var(--color-background-neutral);
  }

  .np-dropdown-header {
    padding: var(--size-8) var(--size-16);
    color: var(--color-content-secondary);
    white-space: nowrap;
    color: var(--color-content-secondary);
    display: block;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    white-space: nowrap;
  }
}

.np-select,
.np-dropdown-menu {
  .tw-icon,
  img {
    .margin(right, var(--size-8));

    display: inline-block;
    vertical-align: middle;
  }

  .np-text-body-default {
    color: var(--color-content-secondary);
  }

  .tw-icon-search {
    margin-right: 0;
  }
}

.np-theme-personal {
  /* stylelint-disable-next-line no-duplicate-selectors */
  .np-select .np-dropdown-toggle {
    background-color: unset;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: none;
    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);

    &:not(.disabled, :disabled):hover {
      box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
    }

    &:not(.disabled, :disabled):focus,
    &:not(.disabled, :disabled):focus-visible,
    &:not(.disabled, :disabled):focus-within {
      box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
    }
  }

  .has-error {
    .np-select .np-dropdown-toggle {
      &,
      &:not(.disabled, :disabled):hover {
        box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
      }

      &:not(.disabled, :disabled):focus,
      &:not(.disabled, :disabled):focus-visible,
      &:not(.disabled, :disabled):focus-within {
        box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
      }
    }
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  .np-dropdown-menu {
    outline: none;

    .active,
    .selected {
      a,
      a:focus,
      a:hover {
        color: var(--color-interactive-primary);
        background-color: var(--color-background-neutral-active);

        .body-2,
        .np-text-body-default {
          color: var(--color-interactive-primary);
        }
      }
    }

    li:not(.active, .selected):not(:has(input)) a:not([disabled], .disabled):active {
      color: var(--color-interactive-primary) !important;
      background-color: var(--color-background-neutral-active) !important;

      .body-2,
      .np-text-body-default {
        color: var(--color-interactive-primary);
      }
    }

    .np-dropdown-item {
      outline: none;

      &--focused {
        box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
      }
    }
  }
}