@use 'utils';
@use 'base/design-tokens';
@use 'base/ionic';
@use 'base/typography';
@use 'base/line-clamp';
@use 'base/link';
@use 'base/html-list';
@use 'base/html-table';
@use 'base/visually-hidden';

@use 'components/grid';
@use 'components/overlays';
@use 'themes/component-themes';

:root,
:host {
  font-family: var(--kirby-font-family);
  @include design-tokens.all;
  @include component-themes.apply-light-theme;

  --kirby-page-max-width: 1366px;
  --kirby-statusbar-padding: var(--ion-statusbar-padding);
  --kirby-safe-area-top: var(--ion-safe-area-top);
  --kirby-safe-area-right: var(--ion-safe-area-right);
  --kirby-safe-area-bottom: var(--ion-safe-area-bottom);
  --kirby-safe-area-left: var(--ion-safe-area-left);
  --kirby-tab-bar-height: 50px;

  // Prevent iOS tap highlight:
  -webkit-tap-highlight-color: transparent;
}

/*
  * Class to add link-icon to the right of e.g. anchor tag.
  */
.kirby-external-icon {
  @include utils.trailing-icon;
}