@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/mixins';

#{$component-prefix}text {
  width: 100%;

  /*
Elements
*/
  ol,
  ul {
    padding-left: 1rem;
    margin: -0.25rem 0 0.5rem 0;
    li {
      position: relative;
      line-height: 1.25rem;
      margin: 0.25rem 0;
    }

    &:last-child {
      margin-bottom: -0.25rem;
    }
  }

  ul {
    list-style: none;
    li:before {
      display: inline-block;
      content: '\2022';
      color: $dark-blue;
      left: -1rem;
      list-style: disc;
      font-size: 1em;
      line-height: 1.25rem;
      position: absolute;
      vertical-align: middle;
    }

    a {
      color: $dark-blue !important;
      font-weight: 600;
      font-family: $font-family-body;
      font-size: 1rem;
      position: relative;

      &:hover {
        color: $dark-blue-50 !important;
      }

      &:after {
        @include mixins.unity-symbols('chevron-right', 0.65rem);
        margin-left: 1em;
      }
    }
  }

  a {
    color: $dark-blue;
    transition: all $transition-effect $transition-duration;
  }

  p > a:not(.o-button) {
    text-decoration: underline;
  }

  h4 a,
  a h4,
  #{$typography-prefix}heading-4 a,
  a #{$typography-prefix}heading-4,
  h3 a,
  a h3,
  #{$typography-prefix}heading-3 a,
  a #{$typography-prefix}heading-3 {
    color: $sodra-black;
    &:before {
      @include mixins.unity-symbols('keyboard-arrow-right');
      color: $blue;
      font-size: 1.5em;
      margin-top: -0.14em;
      margin-left: -0.3em;
      line-height: 0;
    }
  }

  #{$typography-prefix}heading-4,
  #{$typography-prefix}heading-3,
  h4,
  h3 {
    @include mixins.unity-symbols('keyboard-arrow-right');
    color: $blue;
    font-size: 1.5em;
    margin-top: -0.6rem;
    margin-left: -0.3em;
    line-height: 1;
  }

  &.p-3,
  &.p-4 {
    p:first-child {
      margin-top: -4px;
    }

    p:last-child {
      margin-bottom: -4px;
    }
  }

  /*
  Modifiers
  */
  &--padding {
    padding: 1rem;
  }

  &--vertical-align-center {
    align-self: center;
  }

  &--width-small {
    max-width: 37.5rem;
  }

  &--color-white {
    color: $white;
  }

  &--color-black {
    color: $sodra-black;
  }

  #{$object-prefix}button {
    margin-right: 0.5rem;
    @include mixins.media-breakpoint-down(lg) {
      margin-bottom: 0.5rem;
    }
  }
}