html {
  font-family: $font-name, "system";
  font-size: $em-base;
}

body {
  font-size: $base-font-size;
}

p {
  line-height: $base-line-height;
  margin-bottom: 0.8rem;
  margin-top: 1.6rem;
}


a {
  color: $color-link;

  &:hover,
  &.link-hover {
    color:$color-link-hover;

    &:disabled,
    .disabled {
      background-color: transparent !important;
    }

  }

  &:focus,
  &.link-focus {
    color: $color-link-focus;
    outline: $focus-outline;
    outline-offset: $focus-spacing;
  }

  &:visited,
  &.link-visited {
    color: $color-link-visited;
  }

  &:disabled,
  &.disabled {
    cursor: not-allowed !important;
    color: $color-gray-002 !important;
    opacity: 0.3;
    &:focus{
      outline: none;
      background-color: transparent;
    }
  }

  .background-dark &{
    &:not(.button){
      color: $color-white;
    }

    &:disabled,
    &.disabled {
      box-shadow: none !important;
      cursor: not-allowed !important;
      color: $color-gray-medium-light !important;
      box-shadow: none !important;
      outline-offset: inherit !important;
      &:focus{
        outline: none;
        background-color: transparent;
      }
    }
  }
}

//font-family, font-size and line-height for h1-h6, bodytext and smalltext
@mixin h1{
  font-size: $h1-font-size;
  line-height: $h1-line-height;
  font-weight: $font-weight-bold;
  color: $color-black;
  text-transform: none;
  word-break: break-word;
}
@mixin h2 {
  font-size: $h2-font-size;
  line-height: $h2-line-height;
  font-weight: $font-weight-semibold;
  color: $color-black;
  text-transform: none;
}
@mixin h3 {
  font-size: $h3-font-size;
  line-height: $h3-line-height;
  font-weight: $font-weight-semibold;
  color: $color-black;
  text-transform: none;
}
@mixin h4{
  font-size: $h4-font-size;
  line-height: $h4-line-height;
  font-weight: $font-weight-semibold;
  color: $color-black;
  text-transform: none;
}
@mixin h5 {
  font-size: $h5-font-size;
  line-height: $h5-line-height;
  font-weight: $font-weight-semibold;
  color: $color-black;
  text-transform: none;
}
@mixin body-copy-text {
  font-size: $body-text;
  line-height: $body-text-line-height;
  font-weight: $font-weight-normal;
  color: $color-text;
  text-transform: none;
}
@mixin form-label-text {
  font-size: $form-label;
  line-height: $form-label-line-height;
  font-weight: $font-weight-semibold;
  color: $color-black;
  text-transform: none;
}
@mixin h6 {
  font-size: $h6-font-size;
  line-height: $h6-line-height;
  font-weight: $font-weight-medium;
  color: $color-black;
  text-transform: uppercase;
}
@mixin small-text {
  font-size: $small-text;
  line-height: $small-text-line-height;
  font-weight: $font-weight-medium;
}

@mixin font-weight-bold {
  font-weight: $font-weight-semibold;
  color:$color-gray-dark;
}

@mixin font-style-italic {
  font-style: $font-style-italic;
  color:$color-gray-dark
}

@mixin color-text-positive {
  color:$color-text-positive;
}

@mixin color-text-negative {
  color:$color-text-negative;
}

h1, .h1 {
  @include h1;
  @include media-breakpoint-down(sm) {
    font-size: 3.2rem;
  }
}
h2, .h2{
  @include h2;
  @include media-breakpoint-down(sm) {
    font-size: 2.8rem;
  }
}

h3, .h3 {
  @include h3;
  @include media-breakpoint-down(sm) {
    font-size: 2.4rem;
  }
}

h4, .h4{
  @include h4;
}

h5, .h5{
  @include h5;
}

h6, .h6{
  @include h6;
}

p, .body-text, .body-copy-text{
  @include body-copy-text;
}

.font-lead {
  font-size: $lead-font-size;
  font-weight: $font-weight-normal;
  line-height: $lead-line-height;
  max-width: $text-max-width;
  color: $color-text;
}

.weight-normal {
  font-weight: $font-weight-normal;
}

.weight-semibold {
  font-weight: $font-weight-semibold;
}

strong, b, .bold {
  font-weight: $font-weight-bold;
}

.italic, em {
  font-style: $font-style-italic;
}

small, .small-text {
  font-size: $small-text; //1.3rem
  line-height: $small-text-line-height; //1.6rem
  font-weight: $font-weight-normal;
}

.form-label {
  @include form-label-text;
}

//Margin top and bottom for text
//Generel principle for spacing: margin-top same as lineheight of the text, margin-bottom is just standard lineheight for text.
/*h1, .h1, //Removed this styling, it make for a messy margin handling.
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p{
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}*/

h1:focus, .h1:focus, //Removed this styling, it make for a messy margin handling.
h2:focus, .h2:focus,
h3:focus, .h3:focus,
h4:focus, .h4:focus,
h5:focus, .h5:focus,
h6:focus, .h6:focus {
  outline: none;
}

h1, .h1{
  margin-bottom: $body-text;
  margin-top: 0px;
}

h2, .h2 {
  margin-top: map-get($spacers, 6);
  margin-bottom: $body-text;
  @include media-breakpoint-up(md) {
    margin-top: $h1-font-size;
  }
}
h3, .h3{
  margin-top: map-get($spacers, 6);
  margin-bottom: $body-text;
  @include media-breakpoint-up(md) {
    margin-top: $h1-font-size;
  }
}
h4, .h4{
  margin-top: $body-text-line-height;
  margin-bottom: $body-text;
}
h5, .h5{
  margin-top: $body-text-line-height;
  margin-bottom: 0;//h5 does not have margin bottom.
}
h6, .h6{
  margin-top: $body-text-line-height;
  margin-bottom: 0;//h6 does not have margin bottom.
}
.font-lead{
  margin-top: $body-text-line-height;
  margin-bottom: $body-text;
}
p, .body-text{
  margin-top: $body-text;
  margin-bottom: $body-text;
}
h5, .h5, h6, .h6{
  & + p, & + ul, & + ol{
    margin-top: 0; //if next sibling after h5 og h6 is a p-tag, no margin-top on p-tag.
  }
}

//a function link, does not look like a link
.function-link{
  @include body-copy-text;
  display: inline-block;
  &:hover, &:visited, &:focus{
    color: $color-text;
  }
  .icon-svg{
    margin-right: map-get($spacers, 2);
    .background-dark &{
      fill: white;
    }
  }

  &.link-right {
    text-align: right;
  }
}

.back-link{
  border-bottom: $outer-border;
  color: $color-black;
  text-decoration: none;
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
  line-height: 2.4rem;
  padding-left: 14px;
  &::before{
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
    border-width: 5px 6px 5px 0;
    border-right-color: inherit;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  &:active, &:focus, &:hover, &:visited{
    color: $color-black;
  }
}

a.bold-link{
  font-weight: $font-weight-semibold;
}

.icon-link{
  line-height: $body-text-line-height;
  .icon-svg{
    margin-left: map-get($spacers, 2);
    width: 1.6rem;
    height: 1.6rem;
    fill: currentColor;
  }
}

 //styling for link in heading
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  a, a:hover, a:visited, a:focus{
    text-decoration: underline;
  }

  a.search-link {
    text-decoration: none;
    &:visited {
      text-decoration: underline;
    }
    &:focus {
      text-decoration: none;
    }
    &:hover {
      text-decoration: underline;
    }
  }
}

// Remove user agent styles
cite,
var,
address,
dfn {
  font-style: normal;
}

//max-width of 66ch for text
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  max-width: $text-max-width;
}
p,
ul:not(.accordion):not(.accordion-bordered):not(.nav-primary):not(.inline-list):not(.tabnav):not(.sidenav-list):not(.sidenav-sub_list),
ol:not(.accordion):not(.accordion-bordered):not(.sidenav-list){
  max-width: $text-max-width;
}
.font-lead{
  max-width: $text-max-width;
}

.form-label, .form-hint, .form-error-message{
  max-width: $text-max-width;
}
.form-checkbox+label, .form-radio+label{
  max-width: $text-max-width;
}
a:not(.button){
  max-width: $text-max-width;
}


.displayheading {
  &-1 {
    font-weight: 700;
    font-size: $display-1-heading-size;
    line-height: $display-1-heading-line-height;
    margin-bottom: 0;
    color: $color-black;
  }
  &-2 {
    font-weight: 700;
    font-size: $display-2-heading-size;
    line-height: $display-2-heading-line-height;
    margin-bottom: 0;
    color: $color-black;
  }
}

.text-positive {
  @include color-text-positive();
}

.text-negative {
  @include color-text-negative();
}

.color-text-black {
  color: $color-black;
}

.background-dark {
  background-color: $color-black;

  p, span{
    color: $color-white;
  }
}

.field-group-title {
  font-weight: 400;

  ~ hr {
    border: 2px solid $color-black;
  }
}

h1, h2, h3, h4, h5, h6, p, legend, strong, b, cite, var, address, dfn{
  text-rendering: optimizeLegibility; //Vigtig — den er vidst default i Webkit nu, men den har effekt på andre engines
  -webkit-font-smoothing: none; //Fikser for tyk typografi i Webkit-baserede browsers)
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
}

.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}