AlchemyCMS/alchemy_cms

@import "alchemy_admin/select2";

select {
  @include button-defaults(
    $background-color: $form-field-background-color,
    $hover-color: $form-field-background-color,
    $hover-border-color: darken($default-border-color, 10%),
    $padding: $default-padding 26px $default-padding 2 * $default-padding,
    $border: 1px solid $default-border-color,
    $box-shadow: none,
    $color: $form-field-text-color,
    $margin: 0
  );
  height: $form-field-height;
  max-width: 100%;
  width: auto;
  font-weight: normal;
  vertical-align: middle;

  background-image: var(
    --select-background-image,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$icon-color}' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E")
  );
  background-position: right 0.75em center;
  background-repeat: no-repeat;
  background-size: 1em;

  &.tiny {
    padding-right: 0.6em;
  }

  &.medium {
    width: $medium-select-box-width;
  }

  &.large {
    width: $large-select-box-width;
  }
}

.select2-container {
  &.alchemy_selectbox {
    .select2-choice {
      width: 100%;
      height: $form-field-height;
      @include button-defaults(
        $background-color: $form-field-background-color,
        $hover-color: $form-field-background-color,
        $hover-border-color: darken($default-border-color, 10%),
        $padding: $form-field-padding,
        $border: 1px solid $default-border-color,
        $box-shadow: none,
        $color: $form-field-text-color,
        $margin: 0
      );
      background-image: none;
      display: flex;
      gap: 2 * $default-padding;
      align-items: center;
      font-weight: normal;
      text-align: left;

      .select2-chosen {
        flex-grow: 1;
        margin-right: 0;
      }

      .select2-arrow {
        position: static;
        background: transparent;
        border-left: 0 none;

        b {
          display: flex;
          align-items: center;
          justify-content: center;
          background-image: none;
          color: $icon-color;

          &:before {
            display: inline-block;
            content: "";
            width: 1rem;
            height: 1rem;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>')
              no-repeat;
          }
        }
      }

      .select2-search-choice-close {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }

    &.medium {
      width: $medium-select-box-width;
    }

    &.large {
      width: $large-select-box-width;
    }

    &.select2-container-active {
      .select2-choice,
      .select2-choices {
        @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
      }
    }

    &.select2-container-disabled {
      .select2-choice,
      .select2-choice:hover {
        background-image: none;
        background-color: $light-gray;
        box-shadow: none;
        border-color: $border-inset-color;
        cursor: not-allowed;

        .select2-arrow {
          border-color: $border-inset-color;

          b {
            color: $border-inset-color;
          }
        }
      }
    }
  }

  &.select2-container-multi,
  &.select2-allowclear {
    .select2-search-choice-close {
      left: auto;
      right: $default-padding;
      top: 5px;
      background: none;
      text-decoration: none;

      &:before {
        content: "";
        display: inline-flex;
        width: 12px;
        height: 12px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>')
          no-repeat;
      }

      &:hover {
        color: $text-color;
      }
    }
  }

  &.select2-container-multi {
    margin-top: 0 !important;

    &.select2-container-active {
      .select2-choices {
        @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
      }
    }

    .select2-choices {
      @extend %default-input-style;
      padding: 0 2px;
      width: 100%;

      .select2-search-choice {
        margin: 4px;
        padding: 4px 24px 4px 8px;
        background-image: none;
        border: 0 none;
        box-shadow: none;
        color: $text-color;
      }

      .select2-search-field {
        height: 29px;

        input {
          color: $form-field-text-color;
          padding: 3px 6px;
          margin: 0;
        }
      }
    }
  }
}

.select2-drop {
  .select2-search {
    margin: $default-margin 0;

    .select2-input {
      width: inherit;
    }
  }

  &.select2-with-searchbox .select2-results > .select2-result:first-child {
    @include border-top-radius(0);
  }

  .select2-results {
    padding: 0;
    margin: 0;

    > .select2-result:first-child {
      @include border-top-radius($default-border-radius);
    }

    &:last-child {
      @include border-bottom-radius($default-border-radius);
    }

    .select2-result {
      margin: 0;
      padding: 4px 0;

      &.select2-highlighted {
        background: $select-hover-bg-color;
        color: $select-hover-text-color;
      }

      &.select2-result-with-children {
        padding: 0;
      }
    }

    .select2-no-results,
    .select2-searching {
      padding: 8px;
      margin: 0;
    }

    .select2-result-label {
      padding: 4px 8px;
    }

    ul.select2-result-sub > li .select2-result-label {
      padding-left: 16px;
    }
  }

  &.select2-drop-active {
    border-radius: $default-border-radius;
    border: $default-border;
  }

  .select2-more-results,
  .select2-ajax-error {
    padding: 2 * $default-padding;
    margin-bottom: 0;
  }
}

#filter_bar {
  select,
  .select2-container {
    width: 100%;
  }
}

.select_with_label {
  display: inline-flex;
  align-items: center;
  margin: 0 3 * $default-margin;

  label {
    margin-right: 2 * $default-margin;
  }
}

// overriding important of select2 default style for retina screens
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 2dppx) {
  #alchemy {
    .select2-search input,
    .select2-search-choice-close,
    .select2-container .select2-choice abbr,
    .select2-container .select2-choice .select2-arrow b {
      background-image: none !important;
    }
  }
}