@import "settings";

/// Flag whether or not you want to include bonsai select components
/// @type Bool
$bonsai-include-select: $bonsai-include-components !default;

/// Shared styles between a basic select element and a select that is part of an input group
@mixin select-base {
  @include no-appearance;

  cursor: pointer;
  background: none;
  color: $bonsai-primary;
  margin: 0;
  font-size: $bonsai-global-font-size;
}

/// Standalone select styling
@mixin standalone-select {
  @include select-base;

  padding-left: $bonsai-text-input-padding-horizontal;
  height: 40px;
}

/// Input group field select element styling
@mixin input-group-field-select {
  @include select-base;

  border: none;
  border-radius: 0;
  height: 100%;
  margin-left: -3px;
  transition: none;

  &:active,
  &:focus,
  &:hover {
    @include indicator-bar;

    background-color: $bonsai-hover-background;
  }
}

/// Select styling when it is part of an input group field
@mixin input-group-field-select-container {
  box-shadow: inset 0 12px 10px -14px $bonsai-light-gray, inset 0 -12px 10px -14px $bonsai-light-gray;
  padding-right: 1px;
  transition: none;
  border: $bonsai-standard-border;
  border-style: solid none;

  &::before {
    border-left: $bonsai-standard-border;
    content: "";
    padding: 6px 0;
  }

  &::after {
    @include select-triangle($bonsai-primary, rem-calc(-$bonsai-spacing-base * 9));
  }
}

/// Standalone select hover state styling
@mixin basic-select-hover {
  background-color: $bonsai-hover;
  color: $bonsai-white;
  box-shadow: none;
}

/// Styling to create a functional dropdown icon for the select box to indicate users can pick from a set of options
///
/// @param {Color} $color - Color for the css triangle within the select
/// @param {Number} $margin-left - Margin between the triangle icon and elements to the left
@mixin select-triangle($color, $margin-left) {
  @include css-triangle($color: $color);

  pointer-events: none;
  margin-left: $margin-left;
}

/// Styling of container for standalone select elements
@mixin select-container {
  white-space: nowrap;
  margin-bottom: $bonsai-form-spacing;

  &::after {
    @include select-triangle($bonsai-primary, rem-calc(-$bonsai-spacing-base * 7));
  }

  &:hover {
    select {
      @include basic-select-hover;
    }

    &::after {
      @include select-triangle($bonsai-white, rem-calc(-$bonsai-spacing-base * 7));
    }
  }
}

/// Styling of options within a select. Only known to be applied with Firefox
@mixin standalone-select-option-styles {
  background-color: $bonsai-hover-background;
  color: $bonsai-primary;
}

/// Gateway mixin for bonsai select element
@mixin bonsai-select {
  @if $bonsai-include-select {
    .select-container {
      @include select-container;

      select {
        @include standalone-select;

        option {
          @include standalone-select-option-styles;
        }
      }
    }

    .input-group-field.select {
      @include input-group-field-select-container;

      select {
        @include input-group-field-select;
      }
    }
  }
}