@use "design-system";

* {
  box-sizing: border-box;
}

html,
body {
  color: var(--color-text-default);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  overflow: auto;
}

html {
  min-height: 500px;

  @include design-system.screen-sm-max {
    &:not([data-theme]) {
      background-color: var(--color-background-default);
    }
  }

  /*
    Until we get the user's preference from React state,
    assume the user is in dark mode, because the default
    theme is system preference
  */
  @media (prefers-color-scheme: dark) {
    &:not([data-theme]) {
      color: var(--brand-colors-white);
      background-color: var(--brand-colors-grey-grey900);
    }

    @include design-system.screen-sm-max {
      &:not([data-theme]) {
        background-color: var(--brand-colors-grey-grey800);
      }
    }
  }
}

/*
  This error class is used in the following files still:
  /ui/pages/create-account/import-account/json.js
  /ui/pages/create-account/import-account/private-key.js
*/
.error {
  color: var(--color-error-default);
  margin-top: 3px;
  margin-bottom: 9px;
  overflow-wrap: anywhere;
}

/* stylelint-disable */
#app-content {
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;

  html[data-theme] & {
    background: var(--color-background-alternative);
  }

  @include design-system.screen-sm-max {
    html[data-theme] & {
      background-color: var(--color-background-default);
    }
  }
}
/* stylelint-enable */

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: var(--color-primary-alternative);
}

.input-label {
  padding-bottom: 10px;
  font-weight: 400;
  display: inline-block;
}

input.form-control {
  padding-left: 10px;
  font-size: 14px;
  height: 40px;
  border: 1px solid var(--color-border-default);
  color: 1px solid var(--color-text-default);
  background: transparent;
  border-radius: 3px;
  width: 100%;

  &::-webkit-input-placeholder {
    font-weight: 100;
    color: var(--color-text-muted);
  }

  &::-moz-placeholder {
    font-weight: 100;
    color: var(--color-text-muted);
  }

  &:-ms-input-placeholder {
    font-weight: 100;
    color: var(--color-text-muted);
  }

  &:-moz-placeholder {
    font-weight: 100;
    color: var(--color-text-muted);
  }

  &--error {
    border: 1px solid var(--color-error-default);
  }
}

/** Default Typography on base elements **/
* {
  font-family: design-system.$font-family;
}
