@use "../palette";
@use "../typography/text";
@use "../typography/actions";
@use "../typography/proxima-nova";

html,
body {
  text-size-adjust: 100%;

  @include proxima-nova.proxima-nova-regular;

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    color: palette.$standard;

    margin: 0;
    padding: 0;
    border: none;

    background-color: palette.$white;

    width: 100%;
    height: 100%;

    font-size: 16px;
    line-height: 22px; // 16 + 6

    overflow: auto;
  }
}

/**
 *  For IE < 11
 */
main {
  display: block;
  width: 100%;

  margin: 0;
  padding: 0;
  border: none;
}

@mixin design-system {
  max-width: 1020px;
  margin: 0 auto;

  header h1 {
    @include text.heading-xxl;
  }

  button {
    @include actions.button-primary-action;
  }

  label {
    @include text.standard-text;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      display: block;
      padding: 0;
      margin: 0 0 0.25rem 0;
      line-height: 2rem;
    }
  }

  fieldset {
    margin: 0;
    padding: 0;
    border: none;
    legend {
      @include text.heading-m;

      // stylelint-disable-next-line no-duplicate-selectors
      & {
        padding: 0;
        margin: 0 0 1em 0; // EM
        border: none;
      }
    }
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    @include text.standard-text;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      background-color: palette.$white;
      border: 2px solid palette.$black;
      display: inline-block;
      padding: 0.25rem;
      line-height: 2rem;
    }

    &:focus {
      outline: 3px solid palette.$outline;
      outline-offset: 0;
      box-shadow: inset 0 0 0 2px;
      border-color: palette.$black;
    }
  }
}

%design-system {
  @include design-system;
}