MetaPhase-Consulting/State-TalentMAP

// scss-lint:disable SelectorFormat
// The react-simple-dropdown module uses two underscores in its class names.
// Instead of modifying the source css, the SelectorFormat rule
// has been disabled for this file in order to override styles on the
// default classes.
.dropdown {
  display: inline-block;
}

.dropdown__content {
  display: none;
  min-width: 160px;
  position: absolute;
  right: 0;
  z-index: $dropdown-content-z;

  .account-dropdown-link {
    color: $color-black !important;
    display: block;
    padding: 10px 15px;
    width: 100%;
  }

  .account-dropdown-link--button {
    font-weight: bold;
  }

  .account-dropdown-link:hover,
  .account-dropdown-link:focus {
    background: $blue-primary;
    color: $color-white !important;
  }
}

.dropdown--active .dropdown__content {
  display: block;
}

.dropdown-content-outer-container {
  padding-top: 5px;
}

.account-dropdown--avatar {
  font-size: $avatar-dropdown-size * $avatar-text-ratio;
  height: $avatar-dropdown-size;
  line-height: $avatar-dropdown-size;
  margin: 0 5px 0 0;
  width: $avatar-dropdown-size;
}

.notifications-dropdown,
.account-dropdown {
  position: relative;

  &:not(.notifications-dropdown) {
    .dropdown__trigger {
      display: inline-block;
      height: $avatar-dropdown-size;

      &::after {
        content: '\f107';
        font-family: 'FontAwesome';
        font-size: 2rem;
        margin: 0 0 0 5px;
        vertical-align: middle;
      }
    }
  }

  .dropdown__content {
    background: $avatar-dropdown-background;
    border-top: $avatar-dropdown-border-top-color 1px solid;
    box-shadow: 0 5px 8px $avatar-dropdown-box-shadow-color;
  }
}

.notifications-dropdown {
  $width: 320px;
  display: inline-block;
  height: 17px;

  &.dropdown--active .dropdown__content::before {
    border: 10px solid transparent;
    border-right-color: $color-white;
    content: ' ';
    height: 0;
    left: 62%;
    position: absolute;
    top: -20px;
    transform: rotate(90deg);
    width: 0;
  }

  .dropdown__trigger {
    display: block;
    height: auto;

    &:hover,
    &:active {
      .fa {
        color: $primary-alt-light;
      }
    }
  }

  .notifications-title {
    font-size: 1.2em;
    font-weight: bold;
  }

  .dropdown__content {
    border-radius: 5px;
    min-width: $width;
    right: calc(#{$width} / -3);
    top: 37px;
  }

  .account-dropdown--segment {
    color: $color-black;
    padding-bottom: 8px;
  }

  .notifications-list {
    max-height: 250px;
    overflow-y: auto;

    > div {
      border-bottom: 2px solid $color-gray-light;
    }

    > div:nth-child(odd) {
      background: $color-cornflower-blue;
    }

    .unread {
      font-weight: bold;
    }

    .notification-time {
      font-size: .9em;
      font-weight: normal;
      margin-top: 3px;
    }
  }

  .account-dropdown-link {
    padding: 7px 15px;

    > span {
      display: table;
      font-size: .9em;
      margin: 0 auto;
    }
  }

  .notifications-alert {
    color: $color-black;
    display: table;
    margin: 8px auto;

    .fa {
      color: $color-black;
    }
  }

  .notifications-error {
    .fa {
      margin: 0 5px 3px 0;
    }
  }
}

.account-dropdown--avatar,
.account-dropdown--name {
  vertical-align: middle;
}

.account-dropdown--name {
  margin-left: 5px;
}

.account-dropdown--quick-links,
.account-dropdown--management-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.account-dropdown--segment {
  border-bottom: $avatar-dropdown-account-segment-color 1px solid;
  padding: 10px 15px;
}

.account-dropdown--link {
  margin: 5px 0;
}

.actions-dropdown {
  position: relative;

  .dropdown__content {
    background-color: $color-white;
    box-shadow: 0 0 1px 1px $color-gray-lighter;
    display: block;
    font-size: 13px;
    padding-bottom: 30px;
    right: -2px;
    top: 25px;
    width: 120px;
  }

  .account-dropdown--segment {
    border: 0;
    cursor: pointer;
    padding: 5px 10px;
    text-align: right;
  }

  .disabled {
    color: $color-gray-light;
    cursor: not-allowed;
  }

  .account-dropdown--segment:hover:not(.disabled),
  .account-dropdown--segment:focus:not(.disabled) {
    font-weight: bold;
  }
}
// scss-lint:enable SelectorFormat