.dropdown-container
  position: relative
  display: inline-block
  .button.dropdown-trigger
    padding-top: 4px
    padding-bottom: 4px
    margin-bottom: 0
    cursor: pointer
    .dropdown-trigger-icon
      @extend .fa
      @extend .fa-lg
      @extend .fa-caret-left
      margin-right: 6px

  .dropdown-list-container
    $border-size: 1px
    $arrow-size: 7px
    $border-color: #333
    $background-color: white
    $right-offset: 16px
    display: none
    text-align: left
    background-color: $background-color
    position: absolute
    right: 0
    margin: 0
    min-width: 160px
    z-index: 542
    margin-top: 7px
    border-radius: 4px
    border: $border-size solid $border-color
    box-shadow: 5px 5px 5px #888888

    // Arrow
    &:before, &:after
      border: solid transparent
      content: " "
      height: 0
      width: 0
      position: absolute
      pointer-events: none
      bottom: 100%
    &:after
      border-width: $arrow-size
      margin-left: -$arrow-size
      border-bottom-color: $background-color
      right: $right-offset + $border-size
    &:before
      border-bottom-color: $border-color
      border-width: $arrow-size + $border-size
      margin-left: -($arrow-size + $border-size)
      right: $right-offset

    ul
      list-style: none
      margin: 0
      padding: 0
    li
      border-bottom: 1px solid #bbb
      a
        font-size: 0.8em
        display: block
        padding: 4px 7px
        &:hover
          background-color: #ddd
        &.active
          color: $current-color
          background-color: #444
    span.section-add-tables-icon
      @extend .fa
      @extend .fa-plus-square
      span
        padding-left: 7px
    span.section-arrange-tables-icon
      @extend .fa
      @extend .fa-th
      span
        padding-left: 7px
    span.section-remove-icon
      @extend .fa, .fa-trash-o
      span
        padding-left: 7px
    span.icon
      span
        // translation span
        padding-left: 7px
    span.sign-out-icon
      @extend .fa, .fa-sign-out
      span
        padding-left: 7px
    span.current-employee-my-account-icon
      @extend .fa, .fa-user
      span
        padding-left: 7px
    span.current-employee-my-schedule-icon
      @extend .fa, .fa-calendar
      span
        padding-left: 7px
  &.active
    .dropdown-list-container
      display: block
    .button.dropdown-trigger
      .dropdown-trigger-icon
        @extend .fa-caret-down