//
// Bootstrap Select
// --------------------------------------------------
// Credits: Silvio Moreto
// http://github.com/silviomoreto/bootstrap-select

.select {
  display: inline-block;
  margin-bottom: 10px;

  // Select grid
  &[class*="span"] {
    [class*="span"] > & {
      margin-left: 0; // No margin if select is a closest child of the grid
    }
    .btn {
      width: 100%; // Button should take all available space of its parent
    }
  }

  // Fluid width. Takes all available space and behaves like a block
  &.select-block {
    display: block;
    float: none;
    margin-left: 0;
    width: auto;
    .clearfix();

    .btn {
      width: 100%;
    }
  }
  
  
  // Button Sizes
  // --------------------------------------------------

  .btn {
    width: 220px; // Default select width until .span* is applied
    
    // Huge
    &.btn-hg {
      .filter-option {
        left: 20px;
        right: 40px;
        top: 13px;
      }
      .caret {
        right: 20px;        
      }
    }
    
    // Large
    &.btn-lg {
      .filter-option {
        left: 18px;
        right: 38px;
      }
    }
    
    // Small
    &.btn-sm {
      .filter-option {
        left: 13px;
        right: 33px;
      }
      .caret {
        right: 13px;
      }
    }
    
    // Exstra small
    &.btn-xs {
      .filter-option {
        left: 13px;
        right: 33px;
        top: 5px;
      }
      .caret {
        right: 13px;
      }
    }
    
    .filter-option {
      height: 26px;
      left: 13px;
      overflow: hidden;
      position: absolute;
      right: 33px;
      text-align: left;
      top: 10px;
    }
    .caret {
      position: absolute;
      right: 16px;
      top: 50%;
      margin-top: -3px;
    }
    .dropdown-toggle {
      border-radius: @border-radius-large;
    }

    // Dropdown menu
    .dropdown-menu {
      min-width: 100%;

      dt {
        cursor: default;
        display: block;
        padding: 3px 20px;
      }
      li {
        &:not(.disabled) > a:hover small {
          color: fade(@inverse, .4);
        }
        > a {
          min-height: 20px;
          
          &.opt {
            padding-left: 35px;
          }
        }
        small {
          padding-left: .5em;
        }
        > dt small {
          font-weight: normal;
        }
      }
    }

    // Disabled state
    > .disabled,
    .dropdown-menu li.disabled > a {
      cursor: default;
    }
  }

  // Caret
  .caret {
    .caret(@inverse);
  }
}