.#{$iot-prefix}--suite-header-profile {
  background-color: $ui-05;
  color: $inverse-01;
  width: 100%;
  padding: $spacing-05;

  h5 {
    margin-bottom: $spacing-04;
  }

  &--user {
    display: flex;
    align-items: center;
    margin-bottom: $spacing-05;

    &--chip {
      width: $spacing-07;
      height: $spacing-07;
      border-radius: $spacing-05;
      background-color: $ui-03;
      color: $text-01;
      text-align: center;
      line-height: $spacing-07;
    }

    &--detail {
      flex: 1;
      padding-left: $spacing-05;
      overflow: hidden;
      div {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  &--manage-button {
    padding-bottom: $spacing-08;

    /* mimic tertiary button from grey-100 theme */
    .#{$prefix}--btn {
      border: solid 1px $ui-02;
      background-color: $ui-05;

      &:hover {
        background-color: $ui-02;
        color: $ui-05;
      }
    }
    &--no-logout {
      padding-bottom: $spacing-03;
    }
  }

  &--loading {
    height: 120px;
    p {
      background-color: $inverse-hover-ui;
      height: $spacing-04;
      margin-bottom: $spacing-02;
    }
    &--no-logout {
      height: 88px;
    }
  }

  &--logout {
    margin: -$spacing-05;

    .#{$prefix}--btn {
      width: 100%;
    }
    &--loading {
      div {
        background-color: $inverse-hover-ui !important;
      }
    }
  }
}

.#{$iot-prefix}--suite-header-survey-toast {
  position: fixed;
  top: $layout-04;
  right: 0;
  max-width: rem(425px);
  width: auto;
  z-index: z('overlay');

  .#{$prefix}--toast-notification__title {
    margin-top: $spacing-04;
  }
}

.#{$iot-prefix}--suite-header-survey-policy-link {
  margin: auto;
  width: 50%;
  padding-top: $spacing-04;
}

.#{$iot-prefix}--suite-header-app-switcher {
  padding-top: 0;

  li {
    width: 100%;
    button {
      margin: $spacing-05;
      width: calc(100% - 32px);
      min-height: 40px;
    }
    p {
      @include type-style('productive-heading-01');
      display: flex;
      align-items: center;
      padding: $spacing-05 $spacing-05 0;
      text-decoration: none;
      color: $text-01;
    }
  }

  a {
    display: flex;
    align-items: center;
    padding: $spacing-05;
  }

  &--nav-link {
    a {
      text-decoration: none;
      color: $text-02;

      &:hover {
        background-color: $hover-ui;
      }

      svg {
        margin-right: $spacing-03;
      }
    }
    &--loading {
      display: flex;
      padding: $spacing-05;
      flex-direction: column;
      p {
        margin-bottom: $spacing-05;
      }
    }
    &--button--loading {
      padding: $spacing-05;
      div {
        min-height: 40px;
        width: 100% !important;
      }
    }
    &--separator {
      padding: 0;
      height: 0;
      border-bottom: 1px solid $ui-03;
      margin: 0 $spacing-05 0 $spacing-05;
    }
  }

  &--app-link {
    button {
      @include type-style('productive-heading-01');
      text-decoration: none;
      color: $text-02;

      &:hover {
        background-color: $hover-ui;
      }
    }
  }

  &--no-app {
    padding: $layout-05 $spacing-07 $spacing-05;
    .bee-icon-container {
      display: block;
      svg {
        display: inherit;
      }
      .bee-shadow {
        background-color: $ui-03;
        height: $spacing-03;
        width: $spacing-07;
        border-radius: 50%;
        margin-top: $spacing-02;
      }
    }
    span {
      @include type-style('body-short-01');
      color: $text-01;
      padding-top: $spacing-05;
    }
    a {
      text-decoration: none;
      padding: 0;
      margin: $spacing-05 0;
    }
  }
}

.#{$iot-prefix}--suite-header {
  &-data {
    display: none;
  }
  &-subtitle {
    margin-left: $spacing-05;
  }
  button.admin-icon {
    .#{$prefix}--tooltip__trigger svg {
      fill: $ui-01;
    }
  }
  button.admin-icon__hidden {
    visibility: hidden !important;
  }
  button.admin-icon__selected {
    background-color: $interactive-02;
    border: none;
    border-bottom: $spacing-01 solid $ui-01;
    padding-top: $spacing-01;
  }

  .#{$prefix}--header__global {
    position: relative;

    button {
      display: flex;
      align-items: center;
    }
  }

  .#{$prefix}--header__menu {
    div.#{$prefix}--header__menu-item {
      padding: 0;
      border: none;
      color: $text-02;
      background-color: $ui-background;

      &:hover {
        background-color: inherit;
        color: inherit;
      }

      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: center;
    }

    a.#{$prefix}--header__menu-item {
      padding: $spacing-05;

      &:hover {
        color: $text-04;
      }
    }
  }

  .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
    + .#{$prefix}--header__menu {
    width: 16rem;
  }

  .#{$iot-prefix}--suite-header-help--loading {
    background-color: $ui-05;
    color: $inverse-01;
    width: 100%;
    padding: $spacing-05;
    p {
      background-color: $inverse-hover-ui;
      margin-bottom: $spacing-06;
    }
  }

  .#{$iot-prefix}--suite-header-help--separator {
    padding: 0;
    height: 0;
    border-bottom: 1px solid $hover-secondary;
    margin: 0 $spacing-05 0 $spacing-05;
  }

  &--logout {
    a {
      background-color: $interactive-02;
      color: $inverse-01;
      &:hover {
        background-color: $hover-secondary !important;
      }
    }
  }
  &--logout--loading {
    div {
      background-color: $inverse-hover-ui !important;
      width: 256px !important;
    }
  }
}

.#{$iot-prefix}--session-timeout-modal {
  z-index: 9999;
  .#{$prefix}--modal-header .#{$prefix}--modal-close {
    display: none;
  }
}