@use 'abstracts' as *;
/**
 * @sass-export-section="Common"
 */
#{$utilities-prefix}cursor-zoom-in {
  cursor: zoom-in;
}

#{$utilities-prefix}break {
  flex-basis: 100%;
  height: 0;
}

// added in 5.0
#{$utilities-prefix}border-box {
  box-sizing: border-box;
}

/* 
  hide content that exceeds 4 lines of text. 
*/
#{$utilities-prefix}truncate-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

//@end-sass-export-section

/**
 * @sass-export-section="Text"
 */

#{$utilities-prefix}text-justify {
  text-align: justify;
}

#{$utilities-prefix}text-muted {
  color: $sodra-black-60;
}

#{$utilities-prefix}text-transform-none {
  text-transform: none !important;
}

#{$utilities-prefix}text-color-sodra-black {
  color: $sodra-black !important;
}

//@end-sass-export-section

/**
 * @sass-export-section="Fonts"
 */

#{$utilities-prefix}text-tiny {
  font-size: $font-size-tiny;
}

#{$utilities-prefix}sans-serif {
  font-family: $font-family-body;
}

//@end-sass-export-section

/**
 * @sass-export-section="Placement"
 */

#{$utilities-prefix}is-bottom {
  position: absolute;
  bottom: 0;
}
//@end-sass-export-section

/**
 * @sass-export-section="Margins and paddings"
 */

#{$utilities-prefix}margin-top {
  margin-top: $spacer-3;

  @include media-breakpoint-up(md) {
    margin-top: $spacer-5;
  }
}

#{$utilities-prefix}margin-bottom {
  margin-bottom: $spacer-5;

  @include media-breakpoint-up(md) {
    margin-bottom: $spacer-5;
  }
}

#{$utilities-prefix}padding {
  padding: $spacer-3;

  @include media-breakpoint-up(md) {
    padding: $spacer-4;
  }
}
//@end-sass-export-section

/**
 * @sass-export-section="Flex"
 */

#{$utilities-prefix}align-last-item-bottom {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100%;

  :last-child {
    margin-top: auto !important;
  }
}

//@end-sass-export-section

/**
 * @sass-export-section="Position"
 */

#{$utilities-prefix}z-index-top {
  z-index: 99;
}

//@end-sass-export-section

/**
 * @sass-export-section="Display"
 */

#{$utilities-prefix}flex-grow-100 {
  flex-grow: 100;
}

#{$utilities-prefix}display-children-as-block > * {
  display: block !important;
  clear: none;
}

//@end-sass-export-section

/**
 * @sass-export-section="Border"
 */

#{$utilities-prefix}list-unstyled {
  list-style: none;
}

#{$utilities-prefix}hover-effect {
  position: relative;
  &:hover::after,
  &--expanded[aria-expanded='true']::after,
  &--expanded[aria-current='page']::after {
    @include border-bottom($color: $sodra-black);
  }

  &--white {
    &::after {
      border-bottom-color: $white !important;
    }
  }
}
//@end-sass-export-section

/**
 * @sass-export-section="Columns"
 */

/*
  Columns
*/
#{$utilities-prefix}columns-lg-3 {
  @include media-breakpoint-up(lg) {
    columns: 3;
  }
}

//@end-sass-export-section

/**
 * @sass-export-section="Colors"
 */

/* All background colors */
@include background-and-text-color(
  $utilities-prefix + 'background-color-bluish-grey',
  $sodra-black,
  $bluish-grey
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-bluish-grey-50',
  $sodra-black,
  $bluish-grey-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-bluish-grey-25',
  $sodra-black,
  $bluish-grey-25
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-blue',
  $sodra-black,
  $blue
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-blue-75',
  $sodra-black,
  $blue-75
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-blue-50',
  $sodra-black,
  $blue-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-blue-25',
  $sodra-black,
  $blue-25
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-blue-15',
  $sodra-black,
  $blue-15
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-green',
  $sodra-black,
  $green
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-green-75',
  $sodra-black,
  $green-75
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-green-50',
  $sodra-black,
  $green-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-green-25',
  $sodra-black,
  $green-25
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-green-15',
  $sodra-black,
  $green-15
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-yellow',
  $sodra-black,
  $yellow
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-yellow-75',
  $sodra-black,
  $yellow-75
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-yellow-50',
  $sodra-black,
  $yellow-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-yellow-25',
  $sodra-black,
  $yellow-25
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-yellow-15',
  $sodra-black,
  $yellow-15
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-green',
  $sodra-black,
  $sodra-green
);

@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-green-50',
  $sodra-black,
  $sodra-green-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-green-25',
  $sodra-black,
  $sodra-green-25
);

@include background-and-text-color(
  $utilities-prefix + 'background-color-light-grey',
  $sodra-black,
  $light-grey,
  $dark-blue-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-spaceholder-black',
  $white,
  $spaceholder-black
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black',
  $white,
  $sodra-black
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-95',
  $white,
  $sodra-black-95
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-90',
  $white,
  $sodra-black-90
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-85',
  $white,
  $sodra-black-85
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-80',
  $white,
  $sodra-black-80
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-75',
  $white,
  $sodra-black-75
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-70',
  $white,
  $sodra-black-70
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-65',
  $white,
  $sodra-black-65
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-60',
  $white,
  $sodra-black-60
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-55',
  $white,
  $sodra-black-55
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-50',
  $sodra-black,
  $sodra-black-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-45',
  $sodra-black,
  $sodra-black-45
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-40',
  $sodra-black,
  $sodra-black-40
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-35',
  $sodra-black,
  $sodra-black-35
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-30',
  $sodra-black,
  $sodra-black-30
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-25',
  $sodra-black,
  $sodra-black-25
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-20',
  $sodra-black,
  $sodra-black-20
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-15',
  $sodra-black,
  $sodra-black-15
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-10',
  $sodra-black,
  $sodra-black-10
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-sodra-black-5',
  $sodra-black,
  $sodra-black-5
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-red',
  $sodra-black,
  $red
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-red-75',
  $sodra-black,
  $red-75
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-red-50',
  $sodra-black,
  $red-50
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-red-25',
  $sodra-black,
  $red-25
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-red-15',
  $sodra-black,
  $red-15
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-white',
  $sodra-black,
  $white
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-black',
  $white,
  $black
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-dark-blue',
  $white,
  $dark-blue
);
@include background-and-text-color(
  $utilities-prefix + 'background-color-dark-blue-50',
  $white,
  $dark-blue-50
);

/* All background and text colors */
@include background-and-text-color($utilities-prefix + 'color-blue', $blue);
@include background-and-text-color(
  $utilities-prefix + 'color-blue-75',
  $blue-75
);
@include background-and-text-color(
  $utilities-prefix + 'color-blue-50',
  $blue-50
);
@include background-and-text-color(
  $utilities-prefix + 'color-blue-25',
  $blue-25
);
@include background-and-text-color($utilities-prefix + 'color-green', $green);
@include background-and-text-color(
  $utilities-prefix + 'color-green-75',
  $green-75
);
@include background-and-text-color(
  $utilities-prefix + 'color-green-50',
  $green-50
);
@include background-and-text-color(
  $utilities-prefix + 'color-green-25',
  $green-25
);
@include background-and-text-color($utilities-prefix + 'color-yellow', $yellow);
@include background-and-text-color(
  $utilities-prefix + 'color-yellow-50',
  $yellow-75
);
@include background-and-text-color(
  $utilities-prefix + 'color-yellow-50',
  $yellow-50
);
@include background-and-text-color(
  $utilities-prefix + 'color-yellow-25',
  $yellow-25
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-green',
  $sodra-green
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-green-50',
  $sodra-green-50
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-green-25',
  $sodra-green-25
);
@include background-and-text-color(
  $utilities-prefix + 'color-light-grey',
  $light-grey
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black',
  $sodra-black
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-95',
  $sodra-black-95
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-90',
  $sodra-black-90
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-85',
  $sodra-black-85
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-80',
  $sodra-black-80
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-75',
  $sodra-black-75
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-70',
  $sodra-black-70
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-65',
  $sodra-black-65
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-60',
  $sodra-black-60
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-55',
  $sodra-black-55
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-50',
  $sodra-black-50
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-45',
  $sodra-black-45
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-40',
  $sodra-black-40
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-35',
  $sodra-black-35
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-30',
  $sodra-black-30
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-25',
  $sodra-black-25
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-20',
  $sodra-black-20
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-15',
  $sodra-black-15
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-10',
  $sodra-black-10
);
@include background-and-text-color(
  $utilities-prefix + 'color-sodra-black-5',
  $sodra-black-5
);
@include background-and-text-color($utilities-prefix + 'color-black', $black);
@include background-and-text-color($utilities-prefix + 'color-red', $red);
@include background-and-text-color($utilities-prefix + 'color-red-75', $red-75);
@include background-and-text-color($utilities-prefix + 'color-red-50', $red-50);
@include background-and-text-color($utilities-prefix + 'color-red-25', $red-25);
@include background-and-text-color($utilities-prefix + 'color-white', $white);

/* TODO: Remove multiselect when sodra.com is refactored */
/* Form elements background color depending on background color, checkes even hiearchy to see last matching background color before element */
$inputClasses:
  '#{$object-prefix}text-input', '#{$object-prefix}input-text',
  '#{$object-prefix}textarea', '#{$object-prefix}select-list__trigger',
  '#{$object-prefix}select-list__menu', '#{$object-prefix}select',
  '.multiselect .ms-choice', '.filters select', '.ms-drop ul';

[class*='u-background-color'] {
  #{unite($inputClasses)} {
    background-color: $white;
  }

  [class*='u-background-color'] {
    #{unite($inputClasses)} {
      background-color: $white;
    }

    [class*='u-background-color'] {
      #{unite($inputClasses)} {
        background-color: $white;
      }

      [class*='u-background-color'] {
        #{unite($inputClasses)} {
          background-color: $white;
        }

        &#{$utilities-prefix}background-color-white {
          #{unite($inputClasses)} {
            background-color: $light-grey;
          }
        }
      }

      &#{$utilities-prefix}background-color-white {
        #{unite($inputClasses)} {
          background-color: $light-grey;
        }
      }
    }

    &#{$utilities-prefix}background-color-white {
      #{unite($inputClasses)} {
        background-color: $light-grey;
      }
    }
  }

  &#{$utilities-prefix}background-color-white {
    #{unite($inputClasses)} {
      background-color: $light-grey;
    }
  }
}