18F/calc

// Styles for the dropdown under a logged-in user's name.

// We need to do some math on these numbers for positioning, so we put 'em
// in variables to ensure everything stays in sync and is more readable.
$usermenu-caret-size: 6px;
$usermenu-width: 150px;

#usermenu {
  position: relative;

  > ul {
    background: $color-green-lighter;
    border-radius: $border-radius;
    display: none;
    font-size: $medium-font-size;
    font-weight: $font-weight-bold;
    list-style: none;
    margin-right: $space-6x;
    padding: $space-2x $space-3x;
    position: absolute;
    right: 0;
    text-align: left;
    top: $space-4x;
    width: $usermenu-width;
    z-index: 1;

    li {
      margin-bottom: 0.5em;

      &:last-child {
        margin-bottom: 0;
      }
    }

    a {
      text-decoration: none;
      color: $color-blue-darker;

      &:hover {
        border-bottom: 2px solid $color-blue-darker;
      }
    }

    // Menu caret
    &:before {
      content: '';
      position: absolute;
      top: -$usermenu-caret-size;
      left: $usermenu-width/5 - $usermenu-caret-size/2;
      width: 0;
      height: 0;
      border-bottom: $usermenu-caret-size solid $color-green-lighter;
      border-right: $usermenu-caret-size solid transparent;
      border-left: $usermenu-caret-size solid transparent;
    }
  }


  &.is-open {
    > ul {
      display: block;
    }

    .usermenu-trigger {
      text-decoration: none;
      color: $color-white;
    }

    .icon-triangle {
      fill: $color-white;
      transform: rotate(-180deg);
    }
  }
}

a.usermenu-trigger {
  color: $color-green-bright;

  .icon-triangle {
    margin-left: 4px;
    fill: $color-green-bright;
  }

  &:hover {
    text-decoration: none;
  }
}