//Keep the native bootstrap experience for smaller screens
@media(min-width: $screen-sm) {

  .context-selection {
    width: auto;
    padding: 0;

    & > li {
      display: table-cell;
      padding: $padding-xs-horizontal 0;

      & > ul > li {

        &.dropdown-header,
        & > a {
          padding: $bs-dropdown-item-padding-vertical $bs-dropdown-item-padding-horizontal*2 $bs-dropdown-item-padding-vertical $bs-dropdown-item-padding-horizontal;
        }

        &.dropdown-header {
          color: $dropdown-header-color;
        }

        & > a  {
          display: inline-block;
          width: 100%;

          & > .fa.fa-check {
            left: auto;
            float: auto;
            padding-left: $bs-dropdown-item-padding-horizontal/2;
          }
        }
      }

      &:not(:last-child) {
        border-right: 1px solid $gray-light;
      }
    }
  }

  .open .context-selection {
    display: table;

    // display: table pushes down our little arrow a single pixel
    &:before {
      top: -($font-size-small/2);
    }

    &:after {
      top: -($font-size-small/2) + 1;
    }
  }
}