// Base values

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

// Typography

@each $color, $value in $trimble-grays {
  @include text-emphasis-variant('.text-#{$color}', $value);
}
@each $color, $value in $trimble-brand-colors {
  @include text-emphasis-variant('.text-#{$color}', $value);
}

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

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

h3,
.h3 {
  font-weight: $font-weight-semi-bold;
}

h4,
.h4 {
  font-weight: $font-weight-semi-bold;
}

h5,
.h5 {
  font-weight: $font-weight-bold;
}

h6,
.h6 {
  font-weight: $font-weight-bold;
}

.display-1,
.display-2 {
  letter-spacing: .4px;
}

.display-3,
.display-4 {
  letter-spacing: .283px;
}

.lead-text {
  font-size: 1.25rem;
}

.card-text {
  font-size: 1rem;
}

.card-text-2 {
  font-size: 0.75rem;
  font-weight: 600;
}

.card-subtitle-1 {
  font-size: 1rem;
  color: #8c8b96;
}

.card-subtitle-2 {
  font-size: 0.625rem;
  font-weight: 800;
  color: #8c8b96;
}

.form-labels,
.card-caption {
  font-size: 0.75rem;
  color: #8c8b96;
}

label {
  color: $label-color;
  font-size: $label-font-size;

  &.label-lg {
    font-size: $label-font-size-lg;
  }
}

a:focus-visible {
  outline: 1px solid #0063A3;
}

p,
td,
th {
  font-size: $font-size-large;
}

// Background colors

@each $color, $value in $ui-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

@each $color, $value in $trimble-grays {
  @include bg-variant('.bg-#{$color}', $value);
}
@each $color, $value in $trimble-brand-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

// Borders
@each $color, $value in $trimble-grays {
  .border-#{$color} {
    border-color: $value !important;
  }
}

// Breadcrumbs
.breadcrumb-item {
  display: flex;
  align-items: center;

  &::before {
   opacity: 0.5;
  }

  i {
    margin-right: $breadcrumb-item-padding;
    color: $breadcrumb-icon-color;
  }

  &.active i {
    color: $breadcrumb-active-color;
  }

  button {
    padding-left: 0;
    padding-right: 0;
    border: none;
    background: transparent;
    color: $breadcrumb-icon-color;

    &:active, &:focus {
      outline: none;
    }
  }
}

.breadcrumb-underline {
  .breadcrumb-item > a {
    text-decoration: underline;
  }
}

// Buttons

.btn {
  white-space: nowrap;

  &.active,
  &.selected {
    border-color: transparent !important;
    background-color: ui-color('active') !important;
    color: ui-color('main-background') !important;
  }

  &.disabled,
  &:disabled {
    pointer-events: none;
  }
}

@each $color, $value in $theme-colors {
  .btn-text-#{$color} {
    @include button-text-variant($value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

.btn-icon-only {
  padding: 7px;
  line-height: 1.5;
}

@each $class in $icon-font-classes {
  #{$class} {
      position: relative;
      display: inline-block;
      line-height: 1;

    .btn & {
      svg, img {
        height: 16px;
        margin-top: -8px;
      }

      &.left-icon,
      &.right-icon {
        font-size: $btn-icon-font-size;
        line-height: 0.1;
        top: $btn-icon-top;
      }

      &.left-icon {
        margin-left: $btn-icon-neg-margin;
        margin-right: $btn-icon-pos-margin;
      }

      &.right-icon {
        margin-right: $btn-icon-neg-margin;
        margin-left: $btn-icon-pos-margin;
      }
    }

    .btn-lg & {
      svg, img {
        height: 24px;
        margin-top: -12px;
      }

      &.left-icon,
      &.right-icon {
        font-size: $btn-icon-font-size-lg;
        top: $btn-icon-top-lg;
      }

      &.left-icon {
        margin-left: $btn-icon-neg-margin-lg;
        margin-right: $btn-icon-pos-margin-lg;
      }

      &.right-icon {
        margin-right: $btn-icon-neg-margin-lg;
        margin-left: $btn-icon-pos-margin-lg;
      }
    }

    .btn-sm & {
      svg, img {
        height: 14px;
        margin-top: -6px;
      }

      &.left-icon,
      &.right-icon {
        font-size: $btn-icon-font-size-sm;
        top: $btn-icon-top-sm;
      }

      &.left-icon {
        margin-left: $btn-icon-neg-margin-sm;
        margin-right: $btn-icon-pos-margin-sm;
      }

      &.right-icon {
        margin-right: $btn-icon-neg-margin-sm;
        margin-left: $btn-icon-pos-margin-sm;
      }
    }
  }

  .btn-icon-only {
    height: $btn-height;
    width: $btn-height;
    text-align: center;
    padding: 7px 5px;
    &.btn > #{$class} {
      font-size: $rem-20px;
      line-height: 0.8;
      top: 0;

      svg, img {
        height: 22px;
        position: relative;
        top: 2px;
        left: -1px;
      }
    }

    &.btn.btn-sm {
      padding: 5px 4px;
      height: $btn-height-sm;
      width: $btn-height-sm;
      & > #{$class} {
        font-size: $rem-14px;
        line-height: 0.8;

        svg, img {
          height: 14px;
          top: 0;
          left: 0;
        }
      }
    }

    &.btn.btn-lg {
      padding: 11px 8px;
      height: $btn-height-lg;
      width: $btn-height-lg;
      & > #{$class} {
        font-size: 2rem;

        svg, img {
          height: 36px;
          top: 1px;
          left: -3px;
        }
      }
    }
  }
}

.btn-primary:hover,
.btn-primary.hover {
  background-color: #217cbb;
  border-color: #217cbb;
}

// Close button

.close {
  opacity: 1;

  &:not(:disabled):not(.disabled) {
    @include hover-focus() {
      opacity: .75;
    }
  }
}


// Dropdowns

.dropdown-menu {
  &.dropdown-menu-sm, &.dropdown-menu-md, &.dropdown-menu-lg {
    overflow-y: auto;
  }

  &.dropdown-menu-sm {
    max-height: 140px;
  }

  &.dropdown-menu-md {
    max-height: 240px;
  }

  &.dropdown-menu-lg {
    max-height: 400px;
  }
}

.dropdown-item {
  font-size: 14px;
}

// Chips

.chip {
  &.chip-raised {
    box-shadow: $box-shadow;
  }

  .chip-thumbnail {
    display: flex;
    border-radius: 50%;
    overflow: hidden;
    height: 1.5rem;
    width: 1.5rem;
    flex-grow: 0;
    margin-left: -($rem-12px);
    margin-right: $rem-8px;

    img {
      max-height: 1.5rem;
      max-width: 1.5rem;
      vertical-align: initial;
    }
    #{$icon-font-classes},
    .chip-icon {
      font-size: $rem-16px;
    }
  }

  .chip-text {
    display: flex;
    flex-grow: 1;
  }

  .chip-icon-right {
    display: flex;
    flex-grow: 0;
    margin-left: $rem-8px;
    margin-right: -($rem-8px);
    line-height: 1;
    #{$icon-font-classes},
    .chip-icon {
      font-size: $rem-18px;
      transform: rotate(0.03deg);
    }
  }

  .chip-icon-left {
    display: flex;
    flex-grow: 0;
    margin-left: -($rem-8px);
    margin-right: $rem-8px;
    line-height: 1;
    #{$icon-font-classes},
    .chip-icon {
      font-size: $rem-18px;
      transform: rotate(0.03deg);
    }
  }

  .chip-delete-right {
    display: flex;
    flex-grow: 0;
    margin-left: $rem-8px;
    margin-right: -($rem-8px);
    #{$icon-font-classes},
    .chip-icon {
      line-height: 1;
      font-size: $rem-16px;
      transform: rotate(0.03deg);
    }
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  font-weight: $chip-font-weight;
  color: $body-color;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size(
    $chip-padding-y,
    $btn-padding-x,
    $chip-font-size,
    $btn-line-height,
    $chip-border-radius
  );
  @include transition($btn-transition);

  @include hover {
    color: $body-color;
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    opacity: $btn-disabled-opacity;
    pointer-events: none;
    @include box-shadow(none);
  }

  // Opinionated: add "hand" cursor to non-disabled .btn elements
  &:not(:disabled):not(.disabled) {
    cursor: pointer;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    @include box-shadow($btn-active-box-shadow);

    &:focus {
      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
    }
  }
}

.chip-sm {
  @include button-size(
  $chip-sm-padding-y,
  $btn-padding-x,
  $chip-sm-font-size,
  $btn-line-height,
  $chip-border-radius
  );

  .chip-thumbnail {
    height: 1rem;
    width: 1rem;

    img {
      max-height: 1rem;
      max-width: 1rem;
    }
  }

  .chip-text {
    line-height: 1.5;
  }
}

.chip-solid {
  @include chip-variant(
    $chip-base-color,
    $chip-font-color,
    map-get($theme-colors, 'danger')
  );
}

.chip-outline {
  @include chip-outline-variant(
    $chip-base-color,
    $chip-font-color,
    map-get($theme-colors, 'danger')
  );
}

.chip-outline:not(:disabled):not(.disabled):not(.error):active,
.chip-outline:not(:disabled):not(.disabled):not(.error).active {
  background-color: #dcedf9;
  border-color: #217cbb;
}

.chip-outline:not(:disabled):not(.disabled):not(.error):active .chip-delete-right,
.chip-outline:not(:disabled):not(.disabled):not(.error).active .chip-delete-right {
  color: #217cbb;
}

.chip-solid:not(:disabled):not(.disabled):not(.error):active,
.chip-solid:not(:disabled):not(.disabled):not(.error).active {
  background-color: rgba(33, 124, 187, 0.3);
  border-color: transparent;
}

// Cards and Accordions

.card {
  border-width: 0;
  outline: 1px solid transparent;
}

.card-header:first-child {
  border-bottom-color: $card-inner-border-color;
}

.card-footer:last-child {
  border-top-color: $card-inner-border-color;
}

.accordion {
  .card {
    border: none;
    border-bottom: 1px solid transparent;
    background-color: transparent;
    box-shadow: none;

    &:not(:first-of-type):not(:last-of-type),
    &:not(:last-of-type) {
      border-bottom: 1px solid $accordion-border-color;
    }

    &.disabled {
      opacity: 0.4;
      pointer-events: none;
    }

    .card-header {
      position: relative;
      margin-bottom: 0;
      background-color: transparent;
      padding: $accordion-header-padding-y $accordion-header-padding-x;
      border: none;
      cursor: pointer;

      &::after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        right: $accordion-header-padding-x;
        width: 1.5rem;
        height: 100%;
        background: $accordion-indicator-closed no-repeat right $rem-5px center/$rem-14px auto;
        transition: transform .2s ease-in-out;
      }

      h1, h2, h3, h4, h5 ,h6 {
        font-size: $accordion-header-font-size;
        line-height: $accordion-header-line-height;
        font-weight: $font-weight-semi-bold;
        color: $accordion-header-color;
      }

      &:hover {
        background-color: #e0e1e9;
      }

      &[aria-expanded='true']::after {
        transform: rotate(180deg);
        // background: $accordion-indicator-open no-repeat right $rem-5px center/$rem-14px auto;
      }
    }

    .card-body {
      background-color: transparent;
      font-size: $accordion-content-font-size;
    }
  }

  &.accordion-sm {
    .card-header {
      padding: $accordion-header-padding-y-sm $accordion-header-padding-x-sm;

      &::after {
        right: $accordion-header-padding-x-sm;
      }

      & h1, h2, h3, h4, h5 ,h6 {
        font-size: $accordion-header-font-size-sm;
        line-height: $accordion-header-line-height-sm;
      }
    }

    .card-body {
      font-size: $accordion-content-font-size-sm;
    }
  }

  &.borderless {
    .card {
      border-bottom-color: transparent !important;
    }
  }
}

// Lists

.list-group {
  justify-content: center;

  &.list-group-outlined {
    .list-group-item {
      border-color: $list-group-item-outline-color;
    }
  }

  &.list-group-chromeless,
  &.list-group-borderless {
    @extend .list-group-flush;

    .list-group-item {
      border-color: transparent !important;
    }

    .list-group-item {
      @include not(':hover', ':active', '.active') {
        background-color: transparent !important;
      }
    }
  }

  &.list-group-condensed,
  &.list-group-sm {
    .list-group-item {
      min-height: $list-group-item-height-sm;
      font-size: $list-group-item-font-size-sm;
      border-color: $list-group-item-border-color;
      line-height: $list-group-item-line-height-sm;
      padding: $list-group-item-padding-y-sm $list-group-item-padding-x-sm;

      > .modus-icons,
      > .modus-icon {
        font-size: $rem-14px;
      }
    }
  }

  &.list-group-lg {
    .list-group-item {
      min-height: $list-group-item-height-lg;
    }
  }
}

.list-group-item {
  display: flex;
  align-items: center;
  min-height: $list-group-item-height;
  font-size: $list-group-item-font-size;
  border-color: $list-group-item-border-color;
  line-height: $list-group-item-line-height;

  &:hover {
    background-color: ui-color('hover');
  }

  &.disabled {
    color: rgba($body-color, $list-group-item-disabled-opacity);
  }

  > .modus-icons,
  > .modus-icon {
    font-size: $rem-20px;
  }
}

.list-group-item.list-item-left-control {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: auto;
  grid-column-gap: $rem-8px;
  align-items: center;
}

.list-group-item.list-item-right-control {
  display: grid;
  grid-template-columns: auto min-content;
  grid-column-gap: $rem-8px;
  align-items: center;
}

.list-group-item.list-item-leftright-control {
  display: grid;
  grid-template-columns: min-content auto min-content;
  grid-column-gap: $rem-8px;
  align-items: center;
}

// Forms

.form-control {
  border-bottom: 1px solid $col_gray_6;
}

// Fix for https://jira.trimble.tools/browse/DDS-133
.form-control:focus::-moz-placeholder {
  transform: translate3d(0,1px,0);
}

.form-control:focus::-webkit-input-placeholder {
  transform: translate3d(0,1px,0);
}

.form-control {
  &:disabled {
    opacity: $input-disabled-opacity;
  }
}

.input-group {
  .input-group-text {
    font-size: $font-size-small;

    .custom-checkbox,
    .custom-radio {
      height: $font-size-small;
    }

    .custom-control-label::before,
    .custom-control-label::after {
      top: 3px;
      left: -22px;
    }

    .custom-control-input:checked ~ .custom-control-label::after {
      top: 3px;
    }
  }

  &.input-group-lg,
  &.input-group-lg .form-control {
    height: calc(#{$input-height-lg} + #{$rem-4px});

    .input-group-text {
      font-size: $font-size-large;
    }
  }
}

.input-group-outlined {
  input {
    border-color: $input-placeholder-color;

    &:focus {
      border-color: $input-placeholder-color;
    }
  }

  .input-group-append {
    .input-group-text,
    .input-group-icon {
      border-left-color: ui-color('main-background');
    }
  }

  .input-group-prepend {
    .input-group-text,
    .input-group-icon {
      border-right-color: ui-color('main-background');
    }
  }
}

.input-with-icon-left,
.input-with-icon-right {
  position: relative;

  input {
    padding-right: $input-height;
  }

  input:disabled + .input-icon {
    & > #{$icon-font-classes},
    & > .input-icon-icon {
      opacity: $btn-disabled-opacity;
    }
  }

  .input-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    top: 0;
    right: 0;
    height: calc(#{$input-height} - #{$rem-4px});
    width: calc(#{$input-height} - #{$rem-4px});
    font-weight: $font-weight-normal;
    line-height: $input-line-height;
    color: $input-group-addon-color;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    & > #{$icon-font-classes},
    & > .input-icon-icon {
      font-size: $rem-18px;
      transform: rotate(0.03deg);
    }
  }
}

.input-with-icon-left {
  input {
    padding-left: $input-height;
    padding-right: $input-padding-y;

    &.form-control-lg {
      padding-left: $input-height-lg;
      padding-right: $input-padding-y-lg;
    }
  }

  .input-icon {
    right: auto;
    left: 0;
  }
}

.form-control-lg {
  height: calc(#{$input-height-lg} + #{$rem-4px});

  & + .input-icon {
    height: calc(#{$input-height-lg} + #{$rem-4px});
    width: calc(#{$input-height-lg} + #{$rem-4px});
  }

  textarea.form-control & {
    font-size: $input-font-size-lg;
  }
}

.form-control {
  .was-validated &:valid,
  &.is-valid {
    border-color: $input-border-color;
    border-bottom-color: $form-feedback-valid-color !important;
    border-bottom-width: $input-focus-bottom-border !important;
    border-bottom-style: solid !important;

    &:focus {
      border-color: $input-border-color;
      border-bottom-color: $form-feedback-valid-color !important;
      border-bottom-style: solid !important;
    }
  }
}

.form-control {
  .was-validated &:invalid,
  &.is-invalid {
    border-color: $input-border-color;
    border-bottom-color: $form-feedback-invalid-color !important;
    border-bottom-width: $input-focus-bottom-border !important;
    border-bottom-style: solid !important;

    &:focus {
      border-color: $input-border-color;
      border-bottom-color: $form-feedback-invalid-color;
      border-bottom-style: solid !important;
    }
  }
}

.form-text {
  font-size: 11px;
  font-weight: 600;
}

.form-text-lg {
  font-size: 12px;
}

// Alerts & Toasts
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    background-color: $white;
    border-color: $value !important;
    @if lightness($value) < 50 {
      color: $value;
    } @else {
      color: adjust-color($color: $value, $saturation: 0%, $lightness: -20%);
    }

    hr {
      border-top-color: adjust-color($color: $value, $saturation: 0%, $lightness: -13%);
    }

    .alert-link {
      color: adjust-color($color: $value, $saturation: 0%, $lightness: -13%);
      text-decoration: underline;
    }

    .close {
      color: $col_trimble_gray;

      // Override <a>'s hover style
      &:not(:disabled):not(.disabled) {
        @include hover-focus() {
          color: $col_gray_6;
          opacity: 0.5;
        }

        .modus-icon,
        .modus-icons {
          font-size: 1rem;
        }
      }
    }
  }
}

@each $color, $value in $theme-colors {
  .toast-#{$color} {
    background-color: $value;
    border-color: $value;

    hr {
      border-top-color: adjust-color($color: $value, $saturation: 0%, $lightness: -13%);
    }
  }
}

.alert {
  display: flex;
  flex-direction: row;
  border-left: $alert-left-border-width solid;
  font-weight: $alert-font-weight;

  .alert-icon {
    padding-right: $alert-icon-padding;
    font-size: $alert-icon-font;
  }

  .btn, button {
    margin-left: auto;
  }
}

.toast {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: $toast-padding-y $toast-padding-x;
  box-shadow: $box-shadow-lg;

  &.show {
    display: flex;
  }

  .toast-header {
    display: block;
    color: inherit;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
  }

  .toast-body {
    padding: 0;
  }

  .modus-icon {
    font-size: 1rem;
  }
}

.toast-dark {
  color: #fff;
}

.toast-primary {
  background-color: #CFE1EE; // Blue Pale
  color: #07599B; // Blue Dark
}

.toast-secondary {
  background-color: #D0D0D7;
  color: $col_trimble_gray;
}

.toast-tertiary {
  background-color: #F3F3F7;
  color: $col_trimble_gray;
}

.toast-danger {
  background-color: #F4D1D3;
  color: $col_trimble_gray;
}

.toast-warning {
  background-color: #FFF2CC;
  color: $col_trimble_gray;
}

.toast-success {
  background-color: #DFE9D6;
  color: $col_trimble_gray;
}

// Tables

.table.table-bordered th.sticky-top {
  box-shadow: inset 0 -2px 0 $col_gray_2; /* adds 2px bottom border */
  top: -1px; /* prevents 1px gap at top of table */
}

.table {
  thead th {
    vertical-align: $table-cell-vertical-align;
    line-height: 1.25;
    border-bottom-width: 1px;
  }

  th,
  td {
    font-size: $table-cell-font-size;
    line-height: $table-cell-line-height;
    vertical-align: $table-cell-vertical-align;
    height: $table-cell-height;

    &.icon-only {
      width: 3rem; // 48px
      padding-right: .5rem;
      padding-left: .5rem;

      .custom-control-label {
        left: 7px;
      }

      .custom-switch {
        padding-left: 2rem;
      }
    }
  }
}

.table-sm {
  th,
  td {
    font-size: $table-cell-font-size-sm;
    line-height: $table-cell-line-height-sm;
    height: $table-cell-height-sm;

    &.icon-only {
      width: 2rem; // 32px

      .custom-control-label {
        left: 4px;
      }

      .custom-switch {
        padding-left: 1.5rem;
        left: 4px;
      }
    }
  }
}

// Tabs
.nav-tabs {
  .nav-link {
    max-height: $nav-tabs-height;
    min-height: $nav-tabs-height;
    text-align: center;
    text-transform: uppercase;
    font-weight: $nav-tabs-link-font-weight;
    font-size: $nav-tabs-font-size;
    color: $nav-tabs-link-color;
    padding: $nav-tabs-padding-y $nav-tabs-padding-x;

    @each $class in $icon-font-classes {
      #{$class} {
        font-size: $nav-tabs-icon-size;
      }
    }

    @include hover {
      color: $nav-tabs-link-active-color;
      border-color: $nav-tabs-link-hover-border-color;
      background-color: $nav-tabs-link-hover-bg;
    }

    &.disabled {
      opacity: $disabled-opacity;
    }
  }

  .nav-link.active,
  .nav-item.show .nav-link {
    border-bottom: $nav-tabs-active-border-width solid $nav-tabs-link-active-color;
  }

  &.nav-tabs-sm {
    .nav-link {
      max-height: $nav-tabs-height-sm;
      min-height: $nav-tabs-height-sm;
      font-size: $nav-tabs-font-size-sm;
      padding: $nav-tabs-padding-y-sm $nav-tabs-padding-x-sm;

      @each $class in $icon-font-classes {
        #{$class} {
          font-size: $nav-tabs-icon-size-sm;
        }
      }
    }
  }
}

// navbar-blue
.navbar-blue {
  background-color: $col_blue_dark;

  .btn-icon-only {
    color: $col_white;

    &:focus {
      background-color: $col_blue_dark;
    }

    &:active {
      background-color: #019aeb !important;
    }

    &:hover {
      background-color: $col_blue_light;
      border-color: #019aeb;
    }
  }
}

// Badges
.badge {
  @each $class in $icon-font-classes {
    #{$class} {
      font-size: calc(#{$badge-font-size} - 2px);
    }
  }

  &.badge-sm {
    padding: $badge-padding-y-sm $badge-padding-x-sm;
    @include font-size($badge-font-size-sm);

    @each $class in $icon-font-classes {
      #{$class} {
        font-size: calc(#{$badge-font-size-sm} - 1px);
      }
    }
  }

  &.badge-lg {
    padding: $badge-padding-y-lg $badge-padding-x-lg;
    @include font-size($badge-font-size-lg);

    @each $class in $icon-font-classes {
      #{$class} {
        font-size: calc(#{$badge-font-size-lg} - 2px);
      }
    }
  }
}
@each $color, $value in $theme-colors {
  .badge-text-#{$color} {
    @include badge-text-variant($value);
  }
}

.badge-warning {
  color: $col_trimble_gray;
  background-color: #fbad26;
}

// Spinners
.spinner-border {
  color: $col_trimble_blue;
}

// close button
.close {
  color: inherit;
  @include hover {
    color: inherit;
  }
}

// Tertiary Button overrides
.btn-tertiary {
  color: trimble-gray('col_trimble_gray');

  &.disabled,
  &:disabled {
    color: trimble-gray('col_trimble_gray');
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).display-active,
  .show > &.dropdown-toggle {
    color: #252a2e !important;
  }
}

// Progress Bar

.progress {
  border: 1px solid #6a6e79;
}

.progress-sm {
  height: $progress-height * 0.5;
}

.progress-xs {
  height: $progress-height * 0.25;
}

// Pagination
.page-link {
  border-radius: 4px;

  @each $class in $icon-font-classes {
    #{$class} {
      font-size: $rem-12px;
    }
  }
}

.pagination-sm {
  .page-link {
    font-size: $pagination-font-size-sm;
    line-height: $pagination-line-height-sm;

    @each $class in $icon-font-classes {
      #{$class} {
        font-size: $rem-10px;
      }
    }
  }

}

.pagination-lg {
  .page-link {
    font-size: $pagination-font-size-lg;
    line-height: $pagination-line-height-lg;

    @each $class in $icon-font-classes {
      #{$class} {
        font-size: $rem-16px;
      }
    }
  }
}

// Modals

.modal-title {
  font-size: $modal-title-font-size;
  font-weight: bold;
}

.modal-footer {
  padding: $modal-footer-padding;
}

.modal-footer > * {
  margin: 0 0 0 0.5rem;
}

// Messages

.message {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: $rem-14px;
  margin-bottom: 1rem;
  outline: 1px solid transparent;
  border-radius: $border-radius;
  padding: .5rem;

  i {
    position: relative;
    top: 1px;
    font-size: $rem-20px;
    margin-right: .5rem;
  }
}

.message-primary {
  background-color: #dcedf9;
  color: #0063a3;
}

.message-secondary {
  background-color: #f1f1f6;
  color: #6a6e79;
}

// Windows High Contrast Mode

@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .dropdown-toggle::after {
    forced-color-adjust: none;
  }
}

@media (forced-colors: active) and (prefers-color-scheme: light) {
  .custom-control-label::before {
    forced-color-adjust: none;
  }
}

@media (forced-colors: active) {
  .accordion {
    border-radius: 4px;
    outline: 1px solid transparent;
  }

  .navbar {
    outline: 1px solid transparent;
  }

  .page-item.active {
    border-radius: 4px;
    outline: 1px solid transparent;
  }

  .progress-bar {
    forced-color-adjust: none;
  }

  .tooltip .arrow {
    forced-color-adjust: none;
  }

  .tooltip-inner {
    border: 1px solid transparent;
  }

  .custom-control-label::after {
    forced-color-adjust: none;
  }
}