@use "scss/buttons";
@import "bootstrap/scss/bootstrap";

.selector {
  @extend .row;
  @extend .col-12;
  @extend .justify-content-center;
  @extend .align-items-end;

  @each $selectorType in ("available", "chosen") {
    .selector-#{$selectorType} {
      @extend .col;
      @extend .col-auto;
      @extend .col-lg-4;
      & h2 {
        font-size: 1rem;
        background: none;
        color: black;
      }

      & input {
        max-width: 100%;
      }

      & select {
        max-width: 100%;
        height: 17.2em !important;
      }

      & a {
        width: 100%;
        text-align: center;
        background: inherit !important;
      }
    }
  }

  & .selector-chooser {
    @extend .col;
    @extend .col-auto;
    @extend .mb-4;
    @extend .align-self-center;
    width: auto !important;
    height: auto !important;
    max-height: 100px;
    margin-top: 0 !important;
    margin-top: 0 !important;
  }
}

.selector-add, .selector-remove {
  width: 40px !important;
  height: 40px !important;
  text-indent: 0 !important;
  background: inherit !important;
  font-size: 0px;
  text-decoration: none;
}


.selector-add::before {
  @include btn-icon;
  content: "\f0a9  ";
  font-size: 32px;
}

.selector-remove::before {
  @include btn-icon;
  content: "\f0a8  ";
  font-size: 32px;
}
