@import "../colors";
@import "../fonts";
@import "../buttons";

.column(@num) {
  -webkit-column-count: @num;
  -moz-column-count: @num;
  -ms-column-count: @num;
  column-count: @num;
}

.menu-bar .dropdown{
  display: inline-block;

  button, a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    font-size: 12px;
    background: @header-bg;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    color: darken(@white, 15%);
    transition: color ease-in 100ms;
  }

  &:hover {
    button, a {
      color: @white;
    }
  }

  .dropdown-toggle {
    border-radius: 0;
    background: none;
    border: none;
  }

  .server-list {
    .column(2);
  }

  .client-list {
    .column(3);

    @media(max-width: 968px) {
      .column(2);
    }

    @media(max-width: 750px) {
      .column(1);
    }
  }

  .dropdown-menu {
    border-radius: 0;
    border: none;
    box-shadow: none;
    min-width: 140px;

    li {
      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      -ms-column-break-inside: avoid;
    }

    li a {
      overflow: auto;
      padding-top: 5px;
      padding-bottom: 5px;

      .fa {
        font-size: 16px;
        margin-right: 5px;

        &.no-icon {
          min-width: 13px;
        }

        &.highlighted {
          color: @drop-down-color;
        }
      }
    }

    .divider {
      background: lighten(@header-bg, 30%);
    }

    a, button {

      &:hover {
        background: darken(@header-bg, 5%);
      }
    }
  }

  &.open {
    background: darken(@header-bg, 10%);

    .dropdown-menu, a, li, button, button:focus {
      background: darken(@header-bg, 10%);
      color: @white;
    }

    .dropdown-menu {
      margin-top: 0;

      a:hover {
        background: darken(@header-bg, 30%);
      }

      .divider {
        background: darken(@header-bg, 30%);
      }
    }
  }

  .font-size {
    span {
      background: none;

      &.adjust {
        padding: 0px 15px;
        border: 1px solid @gray-md;
        border-radius: 5px;
        margin: 0;
        display: inline-table;

        &:hover {
          background: darken(@header-bg, 10%);
        }

        &:first-child {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-right: none;
        }
        &:last-child {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }
}