@use "./colors";

@mixin tagline {
  font-size: 3.25rem;
  line-height: 100%;
  font-style: italic;
  font-weight: 200;
}

@mixin page-header {
  font-weight: 300;
  font-size: 2.125rem;
  line-height: 100%;
  font-style: italic;
}

@mixin section-header {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 120%;
}

@mixin sub-header {
  font-family: var(--font-corporate-pro);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 120%;
}

@mixin body {
  font-family: var(--font-corporate-pro);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 120%;
}

@mixin system-message {
  font-family: var(--font-corporate-pro);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 120%;
}

@mixin caption {
  font-weight: 300;
  font-size: 14px;
  line-height: 120%;
}

@mixin footer {
  font-weight: 200;
  font-size: 0.875rem;
  line-height: 120%;
  font-style: italic;
}

@mixin text-input {
  font-family: var(--font-corporate-pro);
  font-size: 1.25rem;
  line-height: 100%;
  font-weight: 400;
}
@mixin text-input-small {
  font-family: var(--font-corporate-pro);
  font-size: 1rem;
  line-height: 100%;
}

@mixin chip-large {
  font-family: var(--font-corporate-pro);
  font-size: 1rem;
  line-height: 140%;
}

@mixin chip-small {
  font-family: var(--font-corporate-pro);
  font-size: 0.875rem;
  line-height: 140%;
}

@mixin nav-btn {
  font-family: var(--font-corporate-pro);
  font-size: 1.25rem;
  line-height: 120%;

  &:hover {
    color: colors.$primary-main;
  }
}

@mixin side-nav-btn {
  font-family: var(--font-corporate-pro);
  font-size: 1.125rem;
  line-height: 120%;
  &:hover {
    color: colors.$primary-main;
  }
}

@mixin small-nav-btn {
  font-family: var(--font-corporate-pro);
  font-size: 0.75rem;
  line-height: 120%;
  &:hover {
    color: colors.$primary-main;
  }
}

@mixin context-menu {
  font-size: 0.75rem;
  line-height: 100%;
  font-weight: 300;
}

@mixin primary-btn {
  font-family: var(--font-ibm-mono);
  font-size: 1.25rem;
  font-style: normal;
  line-height: 100%;
  &:hover {
    font-style: italic;
  }
}

@mixin secondary-btn {
  font-family: var(--font-ibm-mono);
  font-size: 1.125rem;
  font-style: normal;
  line-height: 100%;
  &:hover {
    font-style: italic;
  }
}

@mixin tertiary-btn {
  font-family: var(--font-ibm-mono);
  font-size: 1rem;
  font-style: normal;
  line-height: 100%;
  text-decoration: underline;
  &:hover {
    font-style: italic;
  }
}
