@use '../../../style/globals';
@use '../../../style/colors';

.header {
  .light & {
    background: colors.color(primary);
    color: colors.on-color(primary);
  }
  .dark & {
    background: colors.color(light);
  }
  .mat-mdc-button:disabled {
    .light & {
      color: colors.on-color-deemphasis(light);
    }
    .dark & {
      color: colors.on-color-deemphasis(dark);
    }
  }
  .spacer {
    flex: 1 1 auto;
  }
  .app-title {
    a {
      @extend .heading;
      border-bottom-width: 0 !important;
      .dark &,
      .dark &:hover {
        color: colors.color(primary) !important;
      }
      .light &,
      .light &:hover {
        color: colors.color(light) !important;
      }
    }
    .app-version {
      text-transform: none;
      @extend .text-label;
      font-size: 10px;
    }
  }
  button {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    .light & {
      color: colors.on-color(dark);
    }
    .dark & {
      color: colors.on-color(light);
    }
  }

  .links {
    overflow: hidden;
    &.pad-right {
      padding-right: 12px;
    }
  }
  .account.pad-left {
    margin-left: 12px;
  }
  .hamburger {
    position: relative;
    width: 0;
    overflow-x: visible;
    left: -40px;
  }
  .mat-mdc-icon-button.account {
    scale: 0.85;
    vertical-align: middle;
    .dark & {
      background: colors.color-alternate(dark);
    }
    .light & {
      background: colors.color(light);
    }
    svg {
      scale: 1.3;
    }
  }
}
