/* Footer
******************************************************************************* */

.footer {
  --#{$prefix}footer-color: #{$footer-color};
  --#{$prefix}footer-bg: #{$footer-bg};
  --#{$prefix}footer-border-width: #{$footer-border-width};
  --#{$prefix}footer-border-color: #{$footer-border-color};
  --#{$prefix}footer-text-color: #{$footer-text-color};
  --#{$prefix}footer-link-color: #{$footer-link-color};
  --#{$prefix}footer-link-hover-color: #{$footer-link-hover-color};
  --#{$prefix}footer-link-disabled-color: #{$footer-link-disabled-color};
  --#{$prefix}footer-link-active-color: #{$footer-link-active-color};
  --#{$prefix}footer-brand-color: #{$footer-brand-color};
  --#{$prefix}footer-brand-hover-color: #{$footer-brand-hover-color};
  --#{$prefix}footer-box-shadow: #{$footer-box-shadow};

  color: var(--#{$prefix}footer-color);

  .footer-brand{
    color: var(--#{$prefix}footer-brand-color);
    &:hover,
    &:focus {
      color: var(--#{$prefix}footer-brand-hover-color);
    }
  }

  &.content-footer .footer-container {
    block-size: 54px;
  }

  .footer-text {
    color: var(--#{$prefix}footer-text-color);
  }

  .footer-link{
    display: inline-block;
    color: var(--#{$prefix}footer-link-color);
    &:hover,
    &:focus {
      color: var(--#{$prefix}footer-link-hover-color);
    }
    &.disabled {
      color: var(--#{$prefix}footer-link-disabled-color) !important;
    }
    &:active,
    &.active {
      color: var(--#{$prefix}footer-link-active-color);
    }
  }
  &.bg-footer-theme {
    --#{$prefix}footer-brand-color: var(--#{$prefix}body-color);
  }
  &.bg-white {
    --#{$prefix}footer-color: #{$body-color};
    --#{$prefix}footer-text-color: #{$headings-color};
    --#{$prefix}footer-link-color: #{$body-color};
    --#{$prefix}footer-link-hover-color: #{$headings-color};
    --#{$prefix}footer-link-active-color: #{$headings-color};
    --#{$prefix}footer-brand-color: #{$headings-color};
  }
}

/* Generate contextual modifier classes for colorizing the footer */
@each $state in map-keys($theme-colors) {
  .footer.bg-#{$state} {
    @if $state == "light" {
      --#{$prefix}footer-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}base-color) 70%, var(--#{$prefix}paper-bg));
      --#{$prefix}footer-link-hover-color: var(--#{$prefix}heading-color);
      --#{$prefix}footer-link-active-color: var(--#{$prefix}heading-color);
      --#{$prefix}footer-color: var(--#{$prefix}body-color);
      --#{$prefix}footer-link-color: var(--#{$prefix}body-color);
      --#{$prefix}footer-brand-color: var(--#{$prefix}heading-color);
    }
    @else {
      --#{$prefix}footer-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}paper-bg) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}));
      --#{$prefix}footer-link-active-color: var(--#{$prefix}#{$state}-contrast);
      --#{$prefix}footer-link-hover-color: var(--#{$prefix}#{$state}-contrast);
      --#{$prefix}footer-color: var(--#{$prefix}#{$state}-contrast);
      --#{$prefix}footer-text-color: var(--#{$prefix}#{$state}-contrast);
      --#{$prefix}footer-link-color: color-mix(in sRGB, var(--#{$prefix}#{$state}-contrast) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}));
      --#{$prefix}footer-brand-color: var(--#{$prefix}#{$state}-contrast);
    }
  }
}


/* Dark Theme */

@if $enable-dark-mode {
  @include color-mode(dark) {
    @each $state in map-keys($theme-colors) {
      .footer.bg-#{$state} {
        @if $state == "dark" {
          --#{$prefix}footer-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}pure-black) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}-contrast));
          --#{$prefix}footer-link-hover-color: color-mix(in sRGB, var(--#{$prefix}pure-black) #{$bg-label-tint-amount}, var(--#{$prefix}#{$state}-contrast));
        }
      }
    }
  }
}