ux-page-header {
  display: block;
  width: 100%;

  .ux-page-header {
    height: 130px;
    width: 100%;
    padding-left: 23px;
    padding-right: 23px;
    background-color: @page-header-bg;
    color: @white;

    .page-header-content {
      position: relative;
      height: 100%;
    }

    .page-header-logo-container {
      position: absolute;
      top: 0;
      left: 0;
      height: 40px;
      overflow: hidden;
      display: none;

      .page-header-logo {
        max-height: 100%;
      }

      .page-header-acronym {
        display: none; // MF only
      }
    }

    .page-header-subtitle-container {
      display: none; // MF only
    }

    .page-header-state-container {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      height: 70px;

      .page-header-back-button {
        display: flex;
        height: 28px;
        width: 28px;
        margin-top: 16px;
        margin-right: 2px;
        border: none;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;

        &:hover,
        &:focus {
          background-color: @page-header-back-button-hover-bg;
        }

        &:focus {
          .native-focus-outline();
        }

        & > * {
          color: @page-header-back-button-color;

          &:hover {
            color: @page-header-back-button-hover-color;
          }
        }
      }

      ux-breadcrumbs {
        height: 22px;

        .breadcrumb {
          li {
            a,
            span {
              color: @primary;
            }

            a:hover {
              color: @white;
            }

            + li {
              &:before {
                color: @primary;
                opacity: 0.8;
              }
            }
          }
        }
      }

      .page-header-title-container {
        display: flex;
        flex-direction: column;
        margin-right: 10px;

        .page-header-title {
          margin-top: 0;
          margin-bottom: 8px;
          line-height: 35px;
        }
      }
    }

    .page-header-navigation {
      display: flex;
      justify-content: center;
      flex: 1;
      margin: 0 120px;

      &.left {
        justify-content: flex-start;
      }

      &.right {
        justify-content: flex-end;
      }
    }

    .page-header-icon-menus {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      height: 60px;
    }

    // Styling For Condensed Header
    &.page-header-condensed {
      height: 57px;

      .page-header-condensed-content {
        position: relative;
        display: flex;

        .page-header-breadcrumbs {
          display: flex;
          align-items: center;
          margin-right: 10px;

          ux-breadcrumbs {
            height: 22px;

            .breadcrumb {
              li {
                a,
                span {
                  color: @primary;
                }

                a:hover {
                  color: @white;
                }

                + li {
                  &:before {
                    color: @primary;
                    opacity: 0.8;
                  }
                }
              }
            }
          }

          .breadcrumb li:last-of-type span {
            opacity: 1;
          }
        }

        .page-header-navigation {
          display: flex;
          flex: 1;
          justify-content: center;
        }

        .page-header-icon-menus {
          position: static;
        }
      }
    }
  }
}