@import "variables";

#logged-in-user-container {
  position: absolute;
  right: 5px;
  top: 6px;
  padding: 0 0 10px 10px;
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  span, strong, img {
    vertical-align: middle;
  }

  .user-image {
    width: 20px;
    height: 20px;
    border: 1px solid #aaaaaa;
  }

  &:hover #logged-in-user-popdown-wrapper {
    display: block;
  }
}

#logged-in-user-popdown-wrapper {
  display: none;
  position: absolute;
  right: -5px;
  width: 390px;
  padding: 10px 10px 20px 20px;
  z-index: 1000;
}

#logged-in-user-popdown {
  position: relative;
  background: $white;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  padding-bottom: 25px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

  a {
    img, span {
      vertical-align: middle;
    }
  }

  table {
    width: 250px;

    td {
      .flag a {
        display: block;
        width: 20px;
        height: 16px;
      }

      &:first-child {
        text-align: right;
        width: 40%;
      }

      &:last-child {
        padding-left: 5px;
        font-weight: bold;
        height: 25px;
      }
    }
  }

  .user-image {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .popup-content {
    padding: 3px;
  }

  .popup-footer {
    background: $lightgrey;
    border-top: 1px solid #aaaaaa;
    border-radius: 0 0 3px 3px;
    padding: 5px;
    position: absolute;
    width: 100%;
    bottom: 0;
  }

  &:before {
    border-image: none;
    border: 7px solid transparent;
    border-bottom-color: #aaaaaa;
    content: "";
    margin-left: -7px;
    pointer-events: none;
    position: absolute;
    right: 69px;
    top: -14px;
    width: 0;
    height: 0;
  }

  &:after {
    border-image: none;
    border: 6px solid transparent;
    border-bottom-color: $white;
    content: "";
    margin-left: -6px;
    pointer-events: none;
    position: absolute;
    right: 70px;
    top: -12px;
    width: 0;
    height: 0;
  }
}