@import '@digi/core/dist/digi/digi.css';
@import 'mixins/a11y';
@import 'mixins/icon';
@import 'mixins/link';

@keyframes spinning {
  to {
    transform: rotate(360deg);
  }
}

* {
  font-family: var(--digi--typography--font-family);
  box-sizing: border-box;

  ::before,
  ::after {
    box-sizing: border-box;
  }
}

body {
  margin: 0;
  font-weight: var(--digi--typography--font-weight);
}

button {
  font-family: var(--digi--typography--font-family);
  cursor: pointer;
}

strong {
  font-weight: var(--digi--typography--font-weight--semibold);
}

address {
  font-style: normal;
}

dl {
  dt {
    font-weight: var(--digi--typography--font-weight--semibold);
  }

  dd {
    margin-left: 0;
    margin-bottom: 0.5rem;
  }
}

// Make all digi icons display inline-flex to make them get the correct height.
[class^='sc-digi-icon'],
.digi-button__icon {
  display: inline-flex;
}

// Fix issue with too long modal-content. This makes it scrollable.
.digi-ng-dialog-base__content {
  max-height: 90vh;
  overflow-x: auto;
}

.msfa {
  &__a11y-sr-only {
    @include msfa__a11y-sr-only;
  }

  &__small-text {
    font-size: 0.875rem !important;
  }

  &__loading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    &--full-screen {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(255, 255, 255, 0.5);
    }
  }
  &__spinner {
    display: inline-flex;
    animation: spinning 1s linear infinite;
  }

  &__digi-icon {
    display: inline-flex;
  }

  &__link {
    @include msfa__link(false, 'light');

    &--ignore-visited:visited {
      @include msfa__link(true, 'light');
    }
  }
}
