// Login as User — Frontend Impersonation Bar Styles
// Shown on the frontend when an admin is logged in as a customer

.arraysubs-login-as-user-bar {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 999999;

  &--top {
    top: 0;
  }

  &__inner {
    height: auto;
    width: 100%;
    background: #fcfcfc;
    color: #000;
    border-bottom: 1px solid #ccc;
  }

  &__content {
    padding: 5px 15px;
    text-align: center;
    width: 100%;

    * {
      margin: 0;
      padding: 0;
    }
  }

  &__message {
    display: block;
    padding-top: 12px;
    font-size: 14px;
  }

  &__back-btn {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    border: 0 !important;
    font-weight: bold !important;
    text-transform: none !important;
    background: #1f6538 !important;
    color: #fff !important;
    margin: 10px 0;
    text-decoration: none !important;
    cursor: pointer;

    &:hover,
    &:focus,
    &:active {
      background: #924017 !important;
      color: #fff !important;
    }
  }
}

// Admin toolbar link
#wpadminbar #wp-admin-bar-arraysubs-login-as-user-back a.ab-item {
  white-space: nowrap;
}

#wpadminbar #wp-admin-bar-arraysubs-login-as-user-back > .ab-item::before {
  content: "\f14a";
  top: 2px;
}

.wp-admin
  #wpadminbar
  #wp-admin-bar-arraysubs-login-as-user-back
  > .ab-item::before {
  content: "\f14a";
}

// Mobile toolbar
@media screen and (max-width: 782px) {
  #wpadminbar #wp-admin-bar-arraysubs-login-as-user-back a.ab-item {
    text-overflow: clip;
  }

  #wpadminbar #wp-admin-bar-arraysubs-login-as-user-back > .ab-item {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 52px;
    padding: 0;
    color: #a7aaad;
    position: relative;
  }

  #wpadminbar #wp-admin-bar-arraysubs-login-as-user-back > .ab-item::before {
    display: block;
    text-indent: 0;
    font: normal 32px/1 dashicons;
    speak: never;
    top: 7px;
    width: 52px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  #wpadminbar li#wp-admin-bar-arraysubs-login-as-user-back {
    display: block;
  }
}

// Print: hide the bar
@media print {
  .arraysubs-login-as-user-bar,
  .arraysubs-login-as-user-bar * {
    display: none !important;
  }
}

// Mobile bar
@media only screen and (max-width: 782px) {
  .arraysubs-login-as-user-bar__content {
    font-size: 80%;
    width: 80%;
    margin: 0 auto;
  }
}