@use '../core/utilities/mixins';

html {
  @include mixins.normalize;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 2 */
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: var(--kern-color-layout-background-default);
}

[data-kern-theme="dark"],
.kern-dark,
[data-kern-theme="light"],
.kern-light {
  background-color: var(--kern-color-layout-background-default);
}

body:has(.kern-dialog[open]) {
  overflow: hidden;
}

*:not(i) {
  font-family: var(--kern-typography-font-family-default);
}

// All focusable elements
area[href],
iframe,
[tabindex],
[contentEditable="true"] {
  &:not([tabindex="-1"]) {
    &:focus {
      border-radius: var(--kern-metric-border-radius-default, 0.25rem);
      box-shadow: 0 0 0 2px var(--kern-color-action-on-default),
        0 0 0 4px var(--kern-color-action-focus-border-inside),
        0 0 0 6px var(--kern-color-action-focus-border-outside);

      &:focus-visible {
        outline: 0;
      }
    }
  }
}


//kern-sr-only class
.kern-sr-only {
  @include mixins.kern-sr-only;

  &-mobile {
    display: inline; // Show by default

    @media (max-width: 767px) {
      @include mixins.kern-sr-only;
    }
  }
}

.kern-error {
  @include mixins.normalize;
  display: flex;
  gap: var(--kern-metric-space-small, 8px);
  align-items: flex-start;
  align-self: stretch;

  .kern-icon {
    background-color: var(--kern-color-feedback-danger, #BD0F09);
    margin: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px);
  }
}

.kern-number {
  display: flex;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 2px 0px;
  justify-content: center;
  align-items: center;
  border-radius: var(--kern-metric-border-radius-circle, 50%);
  border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-layout-text-default, #171A2B);
  color: var(--kern-color-layout-text-default, #171A2B);
}