@use 'sass:map';
@use './spacers' as spacers;
@use './palette' as palette;
@use './font-mixins' as fonts;
@use './font-settings' as font-settings;
@use './breakpoints' as breakpoints;
@use './fonts' as *;

/*
Denne filen er ment til å importeres som en css module:
import designsystemtypography from './scss/typography.scss'
<div className={designsystemtypography.title1}></div>
*/

.title-feature {
  @include fonts.title-feature;
}

.focused-content {
  font-size: font-settings.$font-size-sm;
  line-height: font-settings.$lineheight-size-sm;
}

.title1 {
  @include fonts.title1;
}

.title2 {
  @include fonts.title2;
}

.title3 {
  @include fonts.title3;
}

.title4 {
  @include fonts.title4;
}

.title5 {
  @include fonts.title5;
}

.title6 {
  @include fonts.title6;
}

.body {
  @include fonts.body;
}

.preamble {
  @include fonts.preamble;
}

.legend {
  @include fonts.legend;
}

.label {
  @include fonts.label;
}

.label-subdued {
  @include fonts.label-subdued;
}

.sublabel {
  @include fonts.sublabel;
}

.sublabel-subdued {
  @include fonts.sublabel-subdued;
}

.compact-data {
  @include fonts.compact-data;
}

.table-cell {
  @include fonts.table-cell;
}

.strong {
  font-size: font-settings.$font-size-sm;
  line-height: font-settings.$lineheight-size-sm;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    font-size: font-settings.$font-size-md;
    line-height: font-settings.$lineheight-size-md;
  }
}

.form {
  font-size: font-settings.$font-size-sm;
  line-height: font-settings.$lineheight-size-sm;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    font-size: font-settings.$font-size-md;
  }
}

.status-timestamp {
  @include fonts.status-timestamp;
}

.image-caption {
  @include fonts.image-caption;
}

.image-credit {
  @include fonts.image-credit;
}

.input-text {
  @include fonts.input-text;
}

.input-text-large {
  @include fonts.input-text-large;
}

.text-list {
  @include fonts.text-list;
}

.definition-list-type {
  @include fonts.definition-list-type;
}

.definition-list-data {
  @include fonts.definition-list-data;
}

.help-text {
  @include fonts.help-text;
}

.help-trigger-text {
  @include fonts.help-trigger-text;
}

.anchorlink-wrapper {
  a {
    display: inline;
    box-decoration-break: clone;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: left;
    color: palette.$blueberry600;
    border: 0.15rem solid transparent;
    text-decoration: underline;
    text-underline-offset: 0.16rem;
    text-decoration-color: palette.$blueberry400;
    text-decoration-thickness: 0.0625rem;
    padding: 0.1rem;

    &:hover {
      cursor: pointer;
      color: palette.$blueberry700;
      background-color: palette.$blueberry50;
      text-decoration-color: palette.$blueberry600;
    }

    &:focus {
      outline: none;
      border: 0.15rem solid palette.$black;
    }

    &[target='_blank'] {
      /* external styling legge til icon */
      &::after {
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='38px' height='38px' viewBox='0 0 48 48' fill='%2308667c'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
        display: inline-block;
        vertical-align: bottom;
        margin-right: -0.4rem;
        margin-top: -2rem;
        margin-bottom: -0.8rem;
      }
    }
  }
}