/* stylelint-disable selector-max-empty-lines */

@import "modern-normalize";
@import (reference) "../../variables/neptune-tokens.less";
@import (reference) "../mixins/_logical-properties.less";
@import (reference) "../mixins/_links.less";
@import (reference) "../core/_typography.less";
@import "../../variables/legacy-variables.less";

:root {
  // page default font size should be set in absolute units (pixels)
  --base-font-size: 16px;
  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
  --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal
    calc(@padding-large-vertical - 2px);
  --btn-padding: @btn-padding-vertical @btn-padding-horizontal calc(@btn-padding-vertical - 2px);
  --btn-xs-padding: @btn-xs-padding-vertical @btn-xs-padding-horizontal
    calc(@btn-xs-padding-vertical - 2px);
  --btn-sm-padding: @btn-sm-padding-vertical @btn-sm-padding-horizontal
    calc(@btn-sm-padding-vertical - 2px);
  --btn-lg-padding: @btn-lg-padding-vertical @btn-lg-padding-horizontal
    calc(@btn-lg-padding-vertical - 2px);
  --input-padding: @padding-large-vertical @padding-base-horizontal
    calc(@padding-large-vertical - 2px);
  --input-padding-small: @padding-small-vertical @padding-small-horizontal
    calc(@padding-small-vertical - 2px);
  --input-padding-large: @padding-large-vertical @padding-large-horizontal
    calc(@padding-large-vertical - 2px);
  --input-group-addon-sm-padding: calc(@padding-small-vertical - 1px) @padding-small-horizontal;
  --input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal
    calc(@padding-large-vertical - 2px);
  --dropdown-link-padding: calc(@padding-large-vertical + 1px) @padding-large-horizontal
    calc(@padding-large-vertical - 1px);
  --btn-radius-base: @border-radius-base;
  --btn-sm-radius-base: @border-radius-small;
  --btn-lg-radius-base: @border-radius-large;
}

.np-theme-light,
.np-theme-dark,
.np-theme-navy {
  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;

  font-family: var(--font-family-regular);
  line-height: var(--line-height-body);
}

.np-theme-personal {
  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;

  font-family: var(--font-family-regular);
  font-feature-settings: "calt";

  --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
  --btn-padding: calc(@btn-padding-vertical - @btn-border-width) @btn-padding-horizontal;
  --btn-xs-padding: calc(@btn-xs-padding-vertical - @btn-border-width) @btn-xs-padding-horizontal;
  --btn-sm-padding: calc(@btn-sm-padding-vertical - @btn-border-width) @btn-sm-padding-horizontal;
  --btn-lg-padding: calc(@btn-lg-padding-vertical - @btn-border-width) @btn-lg-padding-horizontal;
  --btn-height: @btn-height;
  --btn-xs-height: @btn-xs-height;
  --btn-sm-height: @btn-sm-height;
  --btn-lg-height: @btn-lg-height;
  --input-height-base: @input-height-base;
  --input-height-large: @input-height-large;
  --input-height-small: @input-height-small;
  --input-padding: @padding-large-vertical @padding-base-horizontal;
  --input-padding-small: @padding-small-vertical @padding-small-horizontal;
  --input-padding-large: @padding-large-vertical @padding-large-horizontal;
  --input-group-addon-sm-padding: @padding-small-vertical @padding-small-horizontal;
  --input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal;
  --dropdown-link-padding: @padding-large-vertical @padding-large-horizontal;
  --btn-radius-base: 9999px;
  --btn-sm-radius-base: var(--btn-radius-base);
  --btn-lg-radius-base: var(--btn-radius-base);

  color: var(--color-content-secondary);
  background-color: var(--color-background-screen);
}

html {
  font-size: var(--base-font-size);
  font-family: var(--font-family-regular);
  color: var(--color-content-secondary);
  background-color: var(--color-background-screen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

blockquote,
dl,
dd,
hr,
figure,
p,
pre {
  margin: 0;
}

.np-theme-personal::selection {
  background-color: var(--color-background-neutral-active);
  color: var(--color-content-primary);
}

/* DEPRECATED: use `a` tag or .np-text-link-* instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.anchor,
a,
.np-text-link-default,
.np-text-link-large {
  color: var(--color-sentiment-content-primary, var(--color-content-link));

  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
  .bg-primary & {
    color: @color-navy-content-accent;

    &:hover,
    &:focus {
      color: @color-navy-content-accent-hover;
    }

    &:active {
      color: @color-navy-content-accent-active;
    }
  }

  &:hover,
  &:focus {
    color: var(--color-sentiment-content-primary-hover, var(--color-content-link-hover));
    text-decoration: underline;
  }

  &:active {
    color: var(--color-sentiment-content-primary-active, var(--color-content-link-active));
  }

  &.secondary {
    color: var(--color-content-secondary);

    &:hover,
    &:focus {
      color: var(--color-content-accent-hover);
    }

    &:active {
      color: var(--color-content-accent-active);
    }
  }
}

html.ios-click {
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

// iOS "clickable elements" fix for role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

[role="button"] {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

input,
textarea {
  &::placeholder {
    color: var(--color-content-tertiary);
  }
}

ol,
ul {
  margin: 0 0 var(--size-24);
  .padding-shorthand(0, 0, 0, calc(var(--size-48) - var(--size-10)));

  ol,
  ul {
    margin-bottom: 0;
  }
}

.list-unstyled {
  .padding(left, 0);

  list-style: none;
}

.list-inline {
  .margin(left, calc(var(--size-4) * -1));

  .padding(left, 0);

  list-style: none;

  > li {
    display: inline-block;
    .padding(right, var(--size-8));

    .padding(left, var(--size-4));

    .border(right, 1px, solid, var(--color-border-neutral));

    &:last-child {
      .border(right, 0);
    }
  }
}

dt,
dd {
  line-height: var(--line-height-body);
}

dt {
  font-size: var(--font-size-14);
}

dd {
  margin-bottom: var(--size-16);
  color: var(--color-content-primary);

  @media (--screen-sm) {
    margin-bottom: var(--size-24);
  }
}

/* Deprecated - use the Neptune Web DefinitionList component */
.dl-horizontal {
  dd {
    &::before,
    &::after {
      display: table;
      content: " ";
    }

    &::after {
      clear: both;
    }
  }

  @media (--screen-sm) {
    dt {
      .float(left);
      .clear(left);

      width: 156px;
      overflow: hidden;
      white-space: nowrap;
      .text-align(left);

      text-overflow: ellipsis;
    }

    dd {
      margin-bottom: var(--size-8);
      .margin(left, 180px);
    }
  }
}

/* Deprecated - use the Neptune Web DefinitionList component */
.dl-horizontal-item {
  display: flex;
  flex-wrap: nowrap;

  dt {
    flex: 1 2 auto;
  }

  dd {
    flex: 1 1 auto;
    .text-align(right);

    word-break: break-all;
  }
}

hr {
  margin: var(--size-16) auto;
  border: 0;
  border-top: 1px solid var(--color-border-neutral);

  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
  .bg-primary & {
    border-top: 1px solid @color-navy-border-neutral;
  }

  @media (--screen-sm) {
    margin: var(--size-24) auto;
  }

  @media (--screen-lg) {
    margin: var(--size-32) auto;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.img-rounded {
  border-radius: var(--radius-small);
}

.img-circle {
  border-radius: 50%;
}

.disabled,
:disabled {
  filter: grayscale(1);
  opacity: 0.45;
  cursor: not-allowed !important;
}

// Only display content to screen readers
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

// Use in conjunction with `.sr-only` to only display content when it's focused.
.sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}