@use './typography';
@use './variables' as *;
@use './mixins';
@use './transitions';

/* Core CSS required for Ionic components to work properly */
@import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
@import '@ionic/vue/css/normalize.css';
@import '@ionic/vue/css/structure.css';

* {
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  // Icon sizes used with the ICON_SIZES constant
  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
  & {
    --icon-size-xs: 12px;
    --icon-size-sm: 16px;
    --icon-size-rg: 18px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --icon-size-xl: 28px;
    --icon-size-xxl: 44px;
  }
}

html {
  &.is-extension {
    // Fixes issue with extension not rendering properly
    // .tabs-inner & .ion-page classes are added by Ionic
    ion-tabs,
    .tabs-inner,
    ion-router-outlet,
    .ion-page {
      contain: layout style !important;
    }

    body {
      position: unset;
    }
  }

  // When scanner is active we need to hide everything else
  // because the scanner will show-up behind the webview
  &.scanner-active {
    --background: transparent; // Ionic related variable
    --ion-background-color: transparent;

    body,
    #app,
    .app .app-wrapper,
    ion-content,
    .ionic-wrapper,
    .ion-content-bg,
    .ion-content-bg--lighter,
    .account-ion-content {
      --background: transparent; // Ionic related variable

      background: transparent !important;
    }

    .app {
      --screen-bg-color: transparent;
    }

    #app {
      position: absolute;
      z-index: 2;
      width: 100%;
    }
  }
}

body {
  height: 100%;
  margin: 0;
  background-color: $color-bg-body;

  &.color-bg-app {
    background-color: $color-bg-app;
  }
}

#app {
  --ion-text-color: $color-white;
  --ion-font-family: $font-sans;

  height: 100%;

  @include mixins.desktop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.ion-content-bg {
  background-color: $color-bg-app;

  &--lighter {
    background-color: $color-bg-4;
  }
}

ion-content {
  /** hide scrollbar **/
  --offset-bottom: auto !important;
  --overflow: hidden;

  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  /** remove left-right padding **/
  &::part(scroll) {
    --padding-end: 0;
    --padding-start: 0;
    --padding-top: 0;
  }
}

@-moz-document url-prefix() {
  html {
    scrollbar-width: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  color: $color-primary;
  text-decoration: none;
  cursor: pointer;
}

p {
  margin: 0;
  word-break: break-word;

  &:not(:last-of-type) {
    margin-bottom: 8px;
  }
}

ul,
ol {
  margin: 0;
}

button {
  padding: 0;
  background: none;
  border: none;
  color: $color-grey-light;

  &:focus {
    outline: none;
  }
}

hr {
  margin: 20px calc(-1 * var(--screen-padding-x));
  border: none;
  border-bottom: 1px solid rgba($color-white, 0.06);
}

.error-msg {
  color: $color-danger;
  margin-top: 22px;
  font-size: 0.88rem;
}

.tip-note-preview {
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  border: 1px dashed $color-white;
  margin-top: 15px;
  margin-bottom: 30px;
  text-align: left;
  word-break: break-word;
}

.text {
  &-center {
    text-align: center;
  }

  &-left {
    text-align: left;
  }

  &-right {
    text-align: right;
  }

  &-address {
    @extend %face-mono-11-medium;

    display: inline-block;
    letter-spacing: 0.13em;
    color: rgba($color-white, 0.75);
    word-break: break-word;
    transition: 0.1s;

    @at-root a &:hover {
      color: $color-white;
    }
  }

  &-heading-1 {
    @extend %face-sans-22-semi-bold;

    color: $color-white;
  }

  &-heading-2 {
    @extend %face-sans-20-regular;

    color: $color-white;
  }

  &-heading-3 {
    @extend %face-sans-19-regular;

    margin-bottom: 18px;
    color: $color-white;
    text-align: center;
  }

  // E.g.: modal headers
  &-heading-4 {
    @extend %face-sans-18-medium;

    margin-bottom: 0.45em;
    color: $color-white;
  }

  &-heading-5 {
    @extend %face-sans-15-semi-bold;

    color: $color-white;
  }

  &-heading-1,
  &-heading-2,
  &-heading-3,
  &-heading-4,
  &-heading-5 {
    strong {
      font-weight: 500;
    }
  }

  &-subheading {
    @extend %face-sans-16-medium;

    color: rgba($color-white, 0.75);
    white-space: pre-line;
    margin-bottom: 12px;
  }

  &-muted {
    color: rgba($color-white, 0.75);
  }

  &-description {
    @extend %face-sans-15-regular;

    color: rgba($color-white, 0.85);
    white-space: pre-line;

    a {
      color: $color-primary;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    strong {
      font-weight: 600;
      color: $color-white;
    }
  }

  &-caption {
    @extend %face-sans-16-medium;

    margin-bottom: 1em;
    line-height: 24px;
  }

  &-label {
    @extend %face-sans-15-medium;

    line-height: 16px;
    color: rgba($color-white, 0.5);
  }
}

.relative {
  position: relative;
}

.color {
  &-success {
    color: $color-success;
  }

  &-warning {
    color: $color-warning;
  }

  &-warning-muted {
    color: rgba($color-warning, 0.75);
  }

  &-danger {
    color: $color-danger;
  }
}

.styled-scrollbar,
.styled-scrollbar ion-content {
  scrollbar-color: #{$color-scrollbar-thumb} transparent; // Firefox
  scrollbar-width: thin; // Firefox
  -ms-overflow-style: auto;

  &::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 0;

    &-thumb {
      display: block;
      background-color: $color-scrollbar-thumb;
      border-radius: 4px;
    }
  }
}

.blink {
  transition: opacity 0.5s ease-in-out;

  &-hidden {
    opacity: 0;
  }
}
