@import url("@quoine/core/styles/_colors.css");
@import url("@quoine/core/styles/_size.css");

.main {
  composes: relative from "@quoine/styles/position.css";
  composes: pointer from "@quoine/styles/cursor.css";
}

.border {
  composes: border-bottom-accent from "@quoine/styles/box-shadow.css";
}

.border-large {
  composes: border-bottom-accent-size-2 from "@quoine/styles/box-shadow.css";
}

/* select */

@theme {
  .select:global(.is-focused) {
    color: $accent;
    background-color: $accent-1;
  }
  .select:global(.is-disabled) {
    color: $primary-3;
  }
}

/* select menu */

.select :global(.Select-menu-outer) {
  position: absolute;
  top: 100%;
  z-index: 2;

  min-width: 100%;
  /* min-width: calc($base * 8); */
  padding-top: calc($base/2);
  padding-bottom: calc($base/2);
}
@theme {
  .select :global(.Select-menu-outer) {
    background-color: $primary-0;
    border: solid 1px $accent;
    color: $primary-3;
  }
}

.select :global(.Select-menu) {
  max-height: calc($base * 18);
  /* composes: x-scroll from "@quoine/styles/overflow.css"; */
  overflow-y: scroll;
}
:global(.Select-menu) {
  max-height: calc($base * 20);
  overflow-y: auto;
}

/* select option */

.select :global(.Select-option) {
  padding-left: calc($base / 2);
  padding-right: calc($base / 2);
  white-space: nowrap;
}

@theme {
  .select :global(.Select-option.is-selected) {
    color: $accent;
  }
  .select :global(.Select-option.is-focused) {
    color: $accent;
    background-color: $accent-1;
  }
}

/* select value & input */

.select :global(.Select-value),
.select :global(.Select-placeholder) {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
}

@theme {
  .select :global(.Select-placeholder) {
    color: $primary-3;
  }
}

/* icon */

.icon {
  composes: icon from "@quoine/styles/size.css";
  composes: absolute top right bottom from "@quoine/styles/position.css";
  composes: auto from "@quoine/styles/margin.css";
  composes: primary-2 from "@quoine/styles/color.css";
  composes: none from "@quoine/styles/pointer-events.css";
}

@theme {
  .select:global(.is-focused) + .icon {
    color: $accent;
  }
}