#{$alpheios-namespace} {
  // `Important` below is required to override aggressive styling on pages
  font-family: var(--alpheios-sans-font-face) !important;
  font-size: var(--alpheios-base-text-size);
  font-weight: 400;
  color: var(--alpheios-text-color);
  box-sizing: border-box;
  margin: 0;

  // Set default text align to avoid inheritance from the host page
  text-align: left;

  // Prevent mobile browsers from inflating font size
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;

  [lang='ara'] {
    // `Important` below is required to override aggressive styling on pages
    font-family: var(--alpheios-arabic-font-face), Verdana, Arial, Helvetica, sans-serif !important;
    font-variant-ligatures: normal;
  }

  [lang='syr'] {
    // `Important` below is required to override aggressive styling on pages
    font-family: var(--alpheios-syriac-font-face), Verdana, Arial, Helvetica, sans-serif !important;
    font-variant-ligatures: normal;
  }

  h1, h2, h3, h4, h5, h6, p, span, a {
    line-height: 1.15;
    text-align: left;
    padding: 0;
    font-family: var(--alpheios-sans-font-face);
    font-style: normal;
    font-size: var(--alpheios-base-text-size);
    color: var(--alpheios-text-color);
  }

  h1, h2, h3, h4, h5, h6 {
    // To override page styles
    margin: 0;
    // To override default Firefox styles
    margin-block-start: 0;
    margin-block-end: 0;
  }

  p {
    margin: 0 0 textsize(16px);
  }

  a {
    @include alpheios-interactive;
  }

  h1 {
    font-family: var(--alpheios-serif-font-face);
    font-size: calc(var(--alpheios-base-text-size) * 1.625) !important;
    font-weight: 700;
    // `Important` below is required to override aggressive styling on pages
    margin: 0 0 textsize(32px) 0 !important;
    color: var(--alpheios-text-color-dark);
  }

  h2 {
    font-family: var(--alpheios-sans-font-face);
    font-size: calc(var(--alpheios-base-text-size) * 1.5);
    font-weight: 700;
    margin-bottom: textsize(26px);
  }

  h3 {
    font-family: var(--alpheios-sans-font-face);
    font-size: calc(var(--alpheios-base-text-size) * 1.125);
    font-weight: 700;
    margin-bottom: textsize(22px);
  }

  h4 {
    font-family: var(--alpheios-serif-font-face);
    font-size: calc(var(--alpheios-base-text-size) * 1.125);
    font-weight: 400;
    margin-bottom: textsize(18px);
  }

  h5 {
    font-family: var(--alpheios-sans-font-face);
    font-size: (--alpheios-base-text-size);
    font-weight: 700;
    font-style: italic;
    margin-bottom: textsize(16px);
  }

  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }

  select,
  input,
  button {
    text-transform: none;
    line-height: 1.15;
    font-size: var(--alpheios-base-text-size);
  }

  button {
    border: 0;
    font-family: var(--alpheios-sans-font-face);

  }

  textarea {
    overflow: auto;
  }

  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
    width: textsize(12px);
    height: textsize(12px);
  }

  b {
    margin: 0;
    padding: 0;
    vertical-align: inherit;
    font-size: inherit;
    letter-spacing: inherit;
  }

  i {
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
    font-style: inherit;
  }

  u {
    margin: 0;
    padding: 0;
    vertical-align: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    line-height: inherit;
  }
}

.alpheios-clickable {
  cursor: pointer;
}

.alpheios-text-small {
  font-size: calc(var(--alpheios-base-text-size) * 0.875);
  line-height: 1.5;
}

// Shall be applied to all logo SVGs that are shown on light background
.alpheios-logo-on-light {
  .svg-logo-bg {
    fill: #D3ECEC;
  }

  .svg-logo-lines {
    fill: #062135;
  }
}

// Shall be applied to all logo SVGs that are shown on dark background
.alpheios-logo-on-dark {
  .svg-logo-bg {
    display: none;
  }

  .svg-logo-lines {
    fill: #FFF;
  }
}


#{$alpheios-namespace} {
  .alpheios-popup__body,
  .alpheios-panel__content,
  .alpheios-toolbar__lookup {
    h1, h2, h3, h4, h5, h6, p, span, a {
      line-height: 1.15;
      text-align: left;
      padding: 0;
      font-family: var(--alpheios-sans-font-face);
      font-style: normal;
      font-size: var(--alpheios-base-text-size);
      color: var(--alpheios-text-color);
    }
  }

  *[data-alpheios-enable="all"] {
    @include alpheios-enabled;
  }
}