// ==========================================================================
// content.scss - general content styles
// ==========================================================================

.bg {
  @each $theme in map-keys($color-scheme) {
    &-theme-#{$theme} {
      background: map-get($color-scheme, $theme);
    }
  }
  &-gray-lighter {
    background: $gray-lighter;
  }
  &-gray-lightest {
    background: $gray-lightest;
  }
  &-white {
    background: $white;
  }
}

.border {
  @each $theme in map-keys($color-scheme) {
    &-theme-#{$theme} {
      border: 2px solid map-get($color-scheme, $theme);
    }
  }
  &--thick {
    border-width: .25rem;
  }
}

.figure {
  @each $theme in map-keys($color-scheme) {
    &--theme-#{$theme} {
      .figure-img-wrapper {
        &:before {
          background: map-get($color-scheme, $theme);
        }
      }
    }
  }
}

.text-color {
  @each $theme in map-keys($color-scheme) {
    &-theme-#{$theme} {
      color: map-get($color-scheme, $theme);
      @at-root {
        a#{&} {
          @include hover-focus-active {
            color: darken(map-get($color-scheme, $theme), 10%);
          }
        }
      }
    }
    &-hover-theme-#{$theme} {
      @include hover-focus-active {
        color: map-get($color-scheme, $theme) !important;
      }
    }
  }
}

@each $theme in map-keys($color-scheme) {
  #page.theme-#{$theme} {
    .theme-color {
      color: map-get($color-scheme, $theme);
    }
    a.theme-color {
      @include hover-focus-active {
        color: darken(map-get($color-scheme, $theme), 10%);
      }
    }
  }
}

.theme-list {
  color: $gray-darker;
  line-height: 1;
  &-item {
    font-family: $font-family-secondary;
    font-size: .8125rem;
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
    @each $theme in map-keys($color-scheme) {
      &.theme-#{$theme} {
        color: map-get($color-scheme, $theme);
      }
    }
    @include media-breakpoint-down(md) {
      font-size: .6875rem;
    }
  }
}

.theme-marker {
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  &--horizontal {
    height: .3125rem;
    right: 0;
    .theme-marker-item {
      top: auto !important;
    }
  }
  &--vertical {
    bottom: 0;
    width: .3125rem;
    .theme-marker-item {
      left: auto !important;
    }
  }
  &-item {
    background: $gray-darker;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    @each $item in map-keys($color-scheme) {
      &.theme-#{$item} {
        background-color: map-get($color-scheme, $item);
      }
    }
  }

  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-only($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
      $infix: if($infix == "", "-xs", $infix);

      &--horizontal#{$infix} {
        bottom: auto;
        height: .3125rem;
        right: 0;
        width: auto;
        .theme-marker-item {
          top: auto !important;
        }
      }
      &--vertical#{$infix} {
        bottom: 0;
        height: auto;
        right: auto;
        width: .3125rem;
        .theme-marker-item {
          left: auto !important;
        }
      }
    }
  }
}