/*
Dropdown pane

Dropdown pane from trimble css

Markup:
<div class="dropdown-pane-container">
  <div class="dropdownpane-link"> Click here</div>
  <div class="dropdown-pane">
      <ul class="dropdown-list">
          <li>FORCE LOGOFF</li>
          <li>Remove</li>
          <li>Suspend</li>
      </ul>
  </div>
</div>

Styleguide UI Elements.dropdownpane
*/
@import 'colors.scss';
@import 'variables.scss';

.dropdownpane-link {
  cursor: pointer;
}
.dropdown-pane{
    position: absolute;
    z-index: 10;
    padding: 1.25rem;
    visibility: hidden;
    display: none;
    @include shadow-medium;
    @include border-radius(2px);
    background-color:$col_white;
    width: 100%;
    max-width: 10rem;
    &.is-open{
        visibility: visible;
        display: block;
    }
    &.left{
        left:0;
    }
    &.right{
        right:0;
    }
    .dropdown-list{
        li{
            font-size: $font-size-regular;
            margin-bottom:1.5rem;
            @include text-ellipsis;
            &:last-child{
                margin-bottom:0;
            }
            &:hover,&.active{
                color:$col_trimble_blue_light;
                cursor: pointer;
            }
        }
    }
}