// Select combo represents the "enhanced" <select> dropdown combo selector
// Expected to be typically used together with a cdb.admin.Combo view, e.g.
//   new cdb.forms.Combo({
//     className: 'Select',
//      …
//
// --------------------------------------------------

@import '../variables/colors';
@import '../variables/sizes';

.Select {
  width: 100%;
}

.Select .select2-container {
  background: none;
}

.Select .select2-container:hover .select2-choice {
  border-color: $cStructure-mainLine !important;
}

.Select .select2-container .select2-choice {
  background: $cStructure-mainBkg;
}

.Select .select2-container .select2-choice span {
  margin-right: 24px;
  color: $cTypography-paragraphs;
  font-size: $sFontSize-normal;
  font-weight: $sFontWeight-normal;
  line-height: 16px;
}

.Select .select2-container {
  .select2-choice,
  .select2-choice:hover {
    padding-top: 11px;
    padding-right: 12px;
    padding-bottom: 8px;
    border-color: $cForms-border;
    color: $cTypography-paragraphs;

    div b::before {
      content: '\E00A'; // CDB-IconFont-caretDown
      display: inline-block;

      // use the content of "CDB-IconFont-chevronDown" to achieve the "arrow down" artifact
      position: absolute;
      top: 14px;
      right: 12px;
      color: $cTypography-paragraphs;
      // since can't use CDB-IconFont here, we'll inline the CDB-IconFont styles here
      font-family: 'CartoIcon';
      font-size: 9px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: GRAYscale;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
    }

    // override defaults select2 defaults to not interfere with the rules above
    div b::before {
      width: auto;
      border-bottom: 0;
    }

    div b::after {
      display: none;
    }
  }
}

.Select .select2-container.select2-container-disabled {
  opacity: 0.4;
}