.typo3-delphinus {
  font-family: $font-string;
  @include set-font(0, "multiple");

  //explicitly overwrite typo3's font-family on heading
  //Delphinus uses a font-file with better rendering
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: $font-string;
  }

  ul > li::before {
    font-size: inherit;
    margin-left: 0;
  }

  ol > li::before {
    color: color("foreground");
  }

  ul,
  ul,
  dl {
    line-height: unset;
  }

  .button {
    transition: none;
    margin-bottom: 0;

    &[class*=" icon-"]:before,
    &[class^=icon-]:before {
      font-size: unset;
      line-height: unset;
    }
  }

  table {
    border: none !important; //overwrite the default typo3 table border added as attribute to table

    thead,
    tbody,
    tfoot,
    tbody tr {
      background: unset;
      color: unset;
    }

    caption {
      padding: 0;
    }

    td {
      border: none !important; //overwrite the default typo3 table border added as attribute to table
    }
  }

  iframe {
    border: none;
  }

  code {
    color: unset;
    border: unset;
    background-color: unset;
    padding: unset;
    font-weight: unset;
  }

  [class*=icon-]:before,
  [class^=" icon-"]:before {
    cursor: unset;
    width: auto;
    margin: unset;
    line-height: unset;
  }

  button, input, optgroup, select, textarea {
    font-family: unset;
  }

  label, li:before {
    color: unset;
  }

  .main & ul li:before {
    line-height: unset;
  }

  .card {
    border-left: none;
    border-right: none;
    border-bottom: none;
    overflow: visible;
  }

  .switch {
    margin-bottom: 0;
    height: auto;
    user-select: initial;
  }

  .button[disabled] {
    opacity: unset;
    cursor: unset;
  }

  button.button {
    cursor: default;
  }

  a.button {
    cursor: pointer;
  }



  // FOCUS STYLE
  // This is some seriours shit because typo3 stylesheet has :focus {outline: none; !important} so we reverting that to the browser default with another !important, ant then we're styling :focus-visible with our delphinus focus style.
  :focus {
    outline: revert !important;
  }
  
  :focus-visible {
    outline: $outline-width solid color("utility-focus") !important;
  }



  //UNIVERSE SITES
  body.general.universe.staff &,
  body.general.universe.student & {
    //remove typo3 link color
    a:not(:hover):not(:active) {
      color: unset;
    }

    .a--text-link {
      &:hover {
        color: color("foreground-theme");
      }

      &:active {
        color: color("foreground-theme-hover");
      }
    }

    .button {
      color: color("theme-foreground") !important;
    }
    .button--text {
      color: color("foreground-theme") !important;
    }
    .button--dimmed {
      color: color("foreground") !important;
    }

    li::before {
      color: unset;
    }

    a.switch__segment {
      color: color("foreground-hover") !important;

      &:hover {
        color: color("foreground") !important;
      }

      &:active {
        color: color("foreground-theme") !important;
      }
    }

    a.switch__segment--active {
      color: color("theme-foreground") !important;
    }

    a.link--arrow {
      color: color("foreground-theme") !important;

      &:hover {
        color: color("foreground-theme-hover") !important;
      }

      &:active {
        color: color("foreground-theme") !important;
      }
    }

    a.nav__item {
      color: color("foreground-hover") !important;

      &:hover {
        color: color("foreground") !important;
      }
    }

    a.nav__item--active {
      color: color("foreground") !important;
    }

    .profile-header__affiliation__primary a,
    a.profile-header__secondary-affiliations__item__title {
      color: color("foreground-secondary") !important;

      &:hover {
        color: color("foreground-secondary-hover") !important;
      }

      &:active {
        color: color("foreground-theme") !important;
      }
    }

    a.profile-header__cv-link {
      color: color("theme-foreground") !important;
    }
  }

  //OMNIBUS
  body.omnibus & {
    //set font Eames font
    font-family: $omnibus-font-string;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      //explicitly overwrite fonts on headings
      font-family: $omnibus-font-string;
      //reset bottom margin on headings
      margin-bottom: unset;
    }

    .csc-header {
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        //remove header borders
        border-top: none;
        border-bottom: none;
      }
    }

    //set bottom margin on headings acording to Delphinus
    h1 {
      margin-bottom: spacing($typography-margin-bottom-h1);
    }

    h2 {
      margin-bottom: spacing($typography-margin-bottom-h2);
    }

    h3 {
      margin-bottom: spacing($typography-margin-bottom-h3);
    }

    //remove dotted underline on links
    a {
      border-bottom: none;
      color: unset;

      &:not(.button) {
        background-position: .02em bottom, calc(100% - .02em) bottom;
      }
    }

    a.button,
    button {
      background-color: color("theme");

      &:hover {
        background-color: color("theme-hover");
      }
    }

    table {
      border-top: unset;
      border-left: unset;
    }

    table tr td,
    table tr th {
      vertical-align: unset;
      border-right: unset;
      border-bottom: unset;
    }
  }

  // NEWS RELATED
  .news-related {
    width: unset;
    padding: unset;
    border: unset;
    display: unset;

    ul {
      li {
        line-height: unset;
        margin-bottom: unset;
      }
    }

    body.omnibus & {
      &__title {
        margin: 0 0 spacing($typo3-overwrite-related-news-title-margin-bottom) 0;
      }
    }
  }
}
