/*
 * Makes select2 sit correctly next to Bootstrap 3 form controls.
 *
 * select2 ships a 28px-tall box with its own border radius, which reads as
 * undersized beside the .form-control inputs it shares a row with on the Sales
 * and Purchases entry screens. These rules only resize the closed control - the
 * dropdown, search box and result list are left as select2 draws them.
 *
 * Loaded after css/select2/dist/css/select2.min.css so it wins on specificity
 * ties; see application/views/common/header.php.
 */

.select2-container--default .select2-selection--single {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    padding-left: 0;
    padding-right: 20px;
    color: #555;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    right: 6px;
}

/* Match the focus ring Bootstrap puts on .form-control. */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/* The customer/supplier lists run long; cap the drop so it cannot push past
   the fold and force the page to scroll while searching. */
.select2-container--default .select2-results > .select2-results__options {
    max-height: 320px;
}