* {
  box-sizing: border-box;
}

html {
  font-family: $font-family-fallback;

  &.wf-active {
    font-family: $font-family-primary;
  }
}

html,
body {
  height: 100%;
  color: var(--color-black);

  a {
    color: var(--color-brand-light);
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--color-brand-dark);
    }
  }
}

ul, ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: calc-rem(8px);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: $border-radius-base;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

:focus-visible {
  outline-color: inherit;
  outline-width: inherit;
}

input::placeholder {
  @include fontSize($font-size-md);
  overflow: visible;
}

h1 {
  @include fontSize($font-heading-lg);
}

h2 {
  @include fontSize($font-heading-base);
}

h3 {
  @include fontSize($font-heading-md);
}

h4 {
  @include fontSize($font-heading-sm);
}

h5 {
  @include fontSize($font-heading-xs);
}

.mat-body p,
.mat-body-1 p,
.mat-typography p {
  margin: inherit;
}

fieldset:disabled {
  opacity: 0.5;
  cursor: not-allowed;

  * {
    pointer-events: none;
  }
}