@import url("../fonts/FixelText/fontDefinitions.css");

:root {
  /* Sizes */
  --xss: 0.25rem;
  --xs: 0.5rem;
  --sm: 0.75rem;
  --md: 1rem;
  --lg: 1.5rem;
  --xl: 2rem;
  --xxl: 3rem;

  --sd-size-viewport-inline-padding: 5%;

  /* Borders */
  --sd-border-1: solid 0.0625rem;
  --sd-border-2: solid 0.125rem;

  /* Line height */
  --sd-typography-lineHeight-sm: 1.3;
  --sd-typography-lineHeight-lg: 1.5;

  /* Text */
  --sd-typography-color-default: var(--sd-color-neutral-dark-60);
  --sd-typography-fontWeight-normal: 400;
  --sd-typography-fontSize-text-md: 1rem;
  --sd-typography-lineHeight-text-md: var(--sd-typography-lineHeight-lg);
  --sd-typography-fontSize-text-lg: 1.25rem;
  --sd-typography-lineHeight-text-lg: var(--sd-typography-lineHeight-lg);

  /* Headings */
  --sd-typography-fontSize-heading-lg: 3rem;
  --sd-typography-lineHeight-heading-lg: var(--sd-typography-lineHeight-sm);
  --sd-typography-fontSize-heading-md: 2rem;
  --sd-typography-lineHeight-heading-md: var(--sd-typography-lineHeight-sm);
  --sd-typography-fontSize-heading-sm: 1.5625rem;
  --sd-typography-lineHeight-heading-sm: var(--sd-typography-lineHeight-md);

  /* Focus outline */
  --sd-focusVisible-outline-offset: 0.125rem;

  /* Icons */
  --sd-icon-size-default: 1.125rem;

  /* Primary colors */
  --sd-color-primary-70: #335674;
  --sd-color-primary-80: #103e5f;
  --sd-color-primary-90: #002e50;

  /* Secondary colors */
  --sd-color-secondary-10: #e2f4f3;
  --sd-color-secondary-20: #b6eeed;
  --sd-color-secondary-50: #00a9ab;

  /* Neutral colors */
  --sd-color-neutral-light-10: #fff;
  --sd-color-neutral-light-40: #d9d9d9;

  --sd-color-neutral-dark-10: #666666;
  --sd-color-neutral-dark-60: #2b2b2b;
  --sd-color-neutral-dark-80: #141414;

  /* Semi-transparent colors */
  --sd-color-lighten-20: #ffffff33;

  /* Focus visible */
  --sd-color-focusVisible-outline: var(--sd-color-primary-70);
  --sd-color-focusVisible-outline-contrast: var(--sd-color-secondary-50);

  /* Hover */
  --sd-color-hover-default: var(--sd-color-secondary-10);
  --sd-color-hover-contrast: var(--sd-color-primary-80);

  /* Active */
  --sd-color-active-default: var(--sd-color-secondary-20);
  --sd-color-active-contrast: var(--sd-color-primary-70);

  /* Typography */
  --sd-typography-fontFamily: "fixel-text-web", system-ui, sans-serif;

  /* Border radius */
  --sd-border-radius-sm: 0.1875rem;
  --sd-border-radius-lg: 0.5625rem;

  /* AppHeader */
  --sd-AppHeader-background: var(--sd-color-primary-90);

  /* AppFooter */
  --sd-app-footer-background: var(--sd-color-primary-90);
}

/* Global classes from CL */
.sd-focus-visible {
  &:focus-visible {
    outline: var(--sd-border-2) var(--sd-color-focusVisible-outline);
    outline-offset: var(--sd-focusVisible-outline-offset);
  }
}

.sd-hover {
  &:hover {
    background-color: var(--sd-color-hover-default);
  }
}

.sd-break-text {
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Overrides */
.pageWrapper {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvb;

  --heading-margin: var(--md);
  --section-spacer: var(--lg);
  @media (min-width: 43.8125rem) and (min-height: 52rem) {
    --section-spacer: var(--xxl);
    --heading-margin: var(--xl);
  }
}

.pageHeader,
.pageFooter {
  --sd-color-focusVisible-outline: var(
    --sd-color-focusVisible-outline-contrast
  );
  --sd-color-active-default: var(--sd-color-active-contrast);
  border: none;
}

.pageHeader {
  padding-inline: var(--sd-size-viewport-inline-padding);
  padding-block: var(--sm);
  background-color: var(--sd-AppHeader-background);
  margin-block-end: 0;

  .logo {
    &:hover {
      background-color: var(--sd-color-primary-80);
    }
    &:active {
      background-color: var(--sd-color-primary-70);
    }
  }

  .logo {
    display: flex;
    align-items: center;
    & img {
      block-size: var(--lg);
      inline-size: auto;
    }
  }

  & a {
    padding-inline: var(--md);
    padding-block: 0.625rem;
    border-radius: var(--sd-border-radius-sm);
    display: inline-block;
    &:focus-visible {
      outline: 0.125rem solid var(--sd-color-focusVisible-outline-contrast);
    }
  }

  & ul.support {
    & a {
      color: var(--sd-color-neutral-light-10);

      &:hover {
        background-color: var(--sd-color-primary-80);
      }
      &:active {
        background-color: var(--sd-color-primary-70);
      }
    }
  }
}

.pageFooter {
  padding-inline: var(--sd-size-viewport-inline-padding);
  padding-block: var(--xxl);
  background-color: var(--sd-app-footer-background);
  @media (min-width: 43.8125rem) and (min-height: 52rem) {
    padding-inline: 5rem;
  }

  .vcard {
    & a {
      display: inline-flex;
      align-items: center;
      padding: var(--xs);
      &:hover {
        background-color: var(--sd-color-primary-80);
      }
      &:active {
        background-color: var(--sd-color-primary-70);
      }
    }
    & img {
      block-size: var(--lg);
    }
  }

  .bottom {
    padding-block-start: var(--lg);
    border-block-start-color: var(--sd-color-lighten-20);
    .copyright {
      & span {
        color: var(--sd-color-neutral-light-10);
        font-size: var(--sd-typography-fontSize-text-md);
      }
    }
  }
}

a,
button {
  &:focus {
    outline: transparent;
  }

  &:active,
  &:hover:active {
    background-color: var(--sd-color-active-default);
  }
}

a {
  color: var(--sd-color-primary-70);
  text-decoration: none;
  border-radius: var(--sd-border-radius-sm);
}

.external-providers {
  gap: var(--md);

  @media (max-width: 30rem) {
    & li {
      min-inline-size: 14rem;
    }
  }
}

.externalLink {
  display: inline-flex;
  align-items: center;
  gap: var(--xss);

  & svg {
    --sd-icon-strokeWidth: 0.09375rem;
    inline-size: 1em;
    block-size: 1em;
    fill: none;
    stroke: currentColor;
    font-size: var(--sd-icon-size-default);
    stroke-width: var(--sd-icon-strokeWidth);
    flex-shrink: 0;
  }
}

button,
.button {
  color: var(--sd-color-primary-90);
  border-color: var(--sd-color-primary-90);
  padding-block: 0.5625rem;
  border-radius: var(--sd-border-radius-sm);

  &:hover {
    background-color: var(--sd-color-hover-default);
  }

  svg {
    flex-shrink: 0;
  }
}

body {
  font-family: var(--sd-typography-fontFamily);
}

.pageWrapper {
  max-inline-size: unset;
  padding: 0;
  color: var(--sd-typography-color-default);
}

#mainContent {
  flex: 1;
  padding-inline: var(--sd-size-viewport-inline-padding);
  padding-block: var(--section-spacer);
  margin-block-end: 0;

  .wrapper {
    inline-size: 100%;
    max-inline-size: 40.625rem;
    margin-inline: auto;
  }
}

.formContainer {
  background-color: transparent;
  padding: 0;

  .area {
    &:not(:last-of-type) {
      margin-block-end: var(--section-spacer);
    }
  }
}

h1,
h2 {
  color: var(--sd-typography-color-default);
}

h1 {
  font-size: var(--sd-typography-fontSize-heading-md);
  line-height: var(--sd-typography-lineHeight-heading-md);
  @media (min-width: 43.8125rem) and (min-height: 52rem) {
    font-size: var(--sd-typography-fontSize-heading-lg);
    line-height: var(--sd-typography-lineHeight-heading-lg);
  }
}

h2 {
  font-size: var(--sd-typography-fontSize-heading-sm);
  line-height: var(--sd-typography-lineHeight-heading-sm);
  @media (min-width: 43.8125rem) and (min-height: 52rem) {
    font-size: var(--sd-typography-fontSize-heading-md);
    line-height: var(--sd-typography-lineHeight-heading-md);
  }
}

.pageIntroduction {
  margin-block-end: var(--section-spacer);

  & p {
    margin-block-end: var(--xs);
    font-size: var(--sd-typography-fontSize-text-md);
    line-height: var(--sd-typography-lineHeight-text-md);
    @media (min-width: 43.8125rem) and (min-height: 52rem) {
      margin-block-end: var(--md);
      font-size: var(--sd-typography-fontSize-text-lg);
      line-height: var(--sd-typography-lineHeight-text-lg);
    }
  }
}

.areaHeading {
  margin-block-end: var(--heading-margin);
}

.ssoSection {
  .button {
    display: flex;
    gap: var(--xs);
  }
}

.formContainer {
  .item {
    max-inline-size: 27rem;

    & label[for] {
      font-weight: var(--sd-typography-fontWeight-normal);
    }

    & input[type="text"],
    & input[type="password"] {
      padding-block: 0.5625rem;
      border: var(--sd-border-1) var(--sd-color-neutral-dark-10);
      border-radius: var(--sd-border-radius-sm);

      &:hover {
        background-color: var(--sd-color-hover-default);
      }

      &:focus {
        outline: var(--sd-border-2) var(--sd-color-focusVisible-outline);
        outline-offset: var(--sd-focusVisible-outline-offset);
      }
    }
  }

  .formActions {
    margin-block-end: var(--xl);

    & button {
      display: flex;
      gap: var(--xs);
      align-items: center;
    }

    .forgotPasswordButton {
      border-color: transparent;
    }
  }
}

.buttonContainer {
  display: flex;
  gap: var(--xs);
  flex-wrap: wrap;

  & svg {
    inline-size: var(--md);
    block-size: var(--md);
  }
}

.inputWithFunction {
  border-radius: var(--sd-border-radius-sm);
  &:has(input:focus, button:focus:not(:focus-visible)) {
    outline: var(--sd-border-2) var(--sd-color-focusVisible-outline);
    outline-offset: var(--sd-focusVisible-outline-offset);
  }
  #Password {
    border-inline-end-width: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    &:focus {
      outline-color: transparent;
    }
  }
  & button {
    padding-block: 0;
    border-radius: var(--sd-border-radius-sm);
    inline-size: auto;
    border: 0.0625rem solid var(--sd-color-neutral-dark-10);
    border-inline-start-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  & svg {
    inline-size: var(--md);
    block-size: var(--md);
  }
}

.passwordEntry {
  .hide {
    .show-password-icon {
      display: block;
    }
  }
  .show {
    .hide-password-icon {
      display: block;
    }
  }
}

.resend-activation-link-button {
  border-color: transparent;
}