@import '../../../../sass/mixins/elevation';

$header-height: 72px !default;

mat-toolbar {
  @include elevation-4;
  z-index: 10;
}

.header {
  background-color: var(--vitamui-header-footer);
  height: $header-height;
  position: fixed;
  top: 0;
  display: flex;
}

.header-logo {
  width: 15%;

  img {
    vertical-align: middle;
    line-height: 0;
  }
}

.header-actions {
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

vitamui-common-item-select {
  height: 100%;
  width: 100%;
}

vitamui-common-select-language, .select-tenant {
  height: $header-height;
}

.select-tenant {
  width: 18%;
  min-width: 200px;
  border-left: 1px solid var(--vitamui-header-footer-font);
}

.username {
  font-size: 14px;
  height: 20px;
  font-weight: bold;
}

.account {
  cursor: pointer;
  height: $header-height;
  border-left: 1px solid var(--vitamui-header-footer-font);

  .text {
    color: var(--vitamui-header-footer-font);

    &.caption {
      line-height: 1.4;
    }

    &.normal {
      line-height: 2.8;
    }
  }
}

.apps-button {
  background-color: white;
}

.apps-button mat-icon {
  color: var(--vitamui-grey-700);
}

.vitamui-icon-apps-colored {
  font-size: 24px;
}

// Override item selection component css properties for header display only,
// since the design is not common anymore with the other component usages.
:host::ng-deep {
  mat-select, .mat-select-value, .mat-select-arrow, .selected-item-label, .unselected-item-label, .mat-select-value-text {
    color: var(--vitamui-header-footer-font)!important;
  }

  .mat-select-arrow-wrapper {
    vertical-align: top!important;
  }

  mat-form-field {
    background-color: transparent!important;
    box-shadow: none!important;
    height: 100%!important;
    padding-left: 0 1rem!important;
    border: none!important;
    border-radius: 0!important;
    padding: 0 1rem!important;

    .mat-form-field-wrapper  {
      .mat-form-field-flex {
        background-color: transparent!important;
      }
    }
}
}