// This file is included as-is with the @skyux/theme NPM package to be used by our consumers.

@forward 'node_modules/@blackbaud/skyux-design-tokens/scss/mixins';

@use 'variables' as vars;

@mixin sky-host-responsive-container-xs-min($encapsulate: true) {
  @if $encapsulate {
    :host {
      @content;
    }

    :host-context(.sky-responsive-container-xs),
    :host-context(.sky-responsive-container-sm),
    :host-context(.sky-responsive-container-md),
    :host-context(.sky-responsive-container-lg) {
      @content;
    }
  } @else {
    @content;

    .sky-responsive-container-xs,
    .sky-responsive-container-sm,
    .sky-responsive-container-md,
    .sky-responsive-container-lg {
      @content;
    }
  }
}

@mixin sky-host-responsive-container-sm-min($encapsulate: true) {
  @if $encapsulate {
    @media (min-width: vars.$sky-screen-sm-min) {
      :host {
        @content;
      }
    }

    :host-context(.sky-responsive-container-sm),
    :host-context(.sky-responsive-container-md),
    :host-context(.sky-responsive-container-lg) {
      @content;
    }
  } @else {
    @media (min-width: vars.$sky-screen-sm-min) {
      @content;
    }

    .sky-responsive-container-sm,
    .sky-responsive-container-md,
    .sky-responsive-container-lg {
      @content;
    }
  }
}

@mixin sky-host-responsive-container-md-min($encapsulate: true) {
  @if $encapsulate {
    @media (min-width: vars.$sky-screen-md-min) {
      :host {
        @content;
      }
    }

    :host-context(.sky-responsive-container-md),
    :host-context(.sky-responsive-container-lg) {
      @content;
    }
  } @else {
    @media (min-width: vars.$sky-screen-md-min) {
      @content;
    }

    .sky-responsive-container-md,
    .sky-responsive-container-lg {
      @content;
    }
  }
}

@mixin sky-host-responsive-container-lg-min($encapsulate: true) {
  @if $encapsulate {
    @media (min-width: vars.$sky-screen-lg-min) {
      :host {
        @content;
      }
    }

    :host-context(.sky-responsive-container-lg) {
      @content;
    }
  } @else {
    @media (min-width: vars.$sky-screen-lg-min) {
      @content;
    }

    .sky-responsive-container-lg {
      @content;
    }
  }
}

@mixin sky-component($theme, $selector, $encapsulate: true, $breakpoint: '') {
  @if $breakpoint == '' {
    @include sky-component-theme($theme, $selector, $encapsulate) {
      @content;
    }
  } @else if $breakpoint == 'xs' {
    @include sky-host-responsive-container-xs-min($encapsulate) {
      @include sky-component-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  } @else if $breakpoint == 'sm' {
    @include sky-host-responsive-container-sm-min($encapsulate) {
      @include sky-component-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  } @else if $breakpoint == 'md' {
    @include sky-host-responsive-container-md-min($encapsulate) {
      @include sky-component-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  } @else if $breakpoint == 'lg' {
    @include sky-host-responsive-container-lg-min($encapsulate) {
      @include sky-component-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  }
}

@mixin sky-component-theme($theme, $selector, $encapsulate: true) {
  @if $theme == 'modern' {
    @if $encapsulate {
      :host-context(.sky-theme-modern) #{$selector} {
        @content;
      }
    } @else {
      .sky-theme-modern #{$selector} {
        @content;
      }
    }
  } @else {
    #{$selector}:not(.sky-theme-modern *) {
      @content;
    }
  }
}

@mixin sky-component-host(
  $theme,
  $selector: ':host',
  $encapsulate: true,
  $breakpoint: ''
) {
  @if $breakpoint == '' {
    @include sky-component-host-theme($theme, $selector, $encapsulate) {
      @content;
    }
  } @else if $breakpoint == 'xs' {
    @include sky-host-responsive-container-xs-min($encapsulate) {
      @include sky-component-host-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  } @else if $breakpoint == 'sm' {
    @include sky-host-responsive-container-sm-min($encapsulate) {
      @include sky-component-host-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  } @else if $breakpoint == 'md' {
    @include sky-host-responsive-container-md-min($encapsulate) {
      @include sky-component-host-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  } @else if $breakpoint == 'lg' {
    @include sky-host-responsive-container-lg-min($encapsulate) {
      @include sky-component-host-theme($theme, $selector, $encapsulate) {
        @content;
      }
    }
  }
}

@mixin sky-component-host-theme(
  $theme,
  $selector: ':host',
  $encapsulate: true
) {
  @if $theme == 'default' {
    #{$selector}.sky-cmp-theme-default {
      @content;
    }
  } @else {
    @if $encapsulate {
      :host-context(.sky-theme-modern) #{$selector}.sky-cmp-theme-modern {
        @content;
      }
    } @else {
      .sky-theme-modern #{$selector}.sky-cmp-theme-modern {
        @content;
      }
    }
  }
}

@mixin sky-theme-modern {
  :host-context(.sky-theme-modern) {
    @content;
  }
  .sky-theme-modern {
    @content;
  }
}

@mixin sky-theme-modern-dark {
  :host-context(.sky-theme-modern.sky-theme-mode-dark) {
    @content;
  }
  .sky-theme-modern.sky-theme-mode-dark {
    @content;
  }
}

@mixin sky-theme-modern-border(
  $color: vars.$sky-theme-modern-border-color-neutral-medium
) {
  border: none;
  box-shadow: inset 0 0 0 1px $color;
}

@mixin sky-theme-modern-border-hover(
  $color: vars.$sky-theme-modern-background-color-primary-dark
) {
  border: none;
  box-shadow: inset 0 0 0 1px $color;
}

@mixin sky-theme-modern-border-active(
  $color: vars.$sky-theme-modern-background-color-primary-dark
) {
  border: none;
  box-shadow: inset 0 0 0 2px $color;
}

@mixin sky-theme-modern-border-focus(
  $color: vars.$sky-theme-modern-background-color-primary-dark,
  $shadow-size: vars.$sky-theme-modern-elevation-1-shadow-size,
  $shadow-color: vars.$sky-theme-modern-elevation-1-shadow-color
) {
  border: none;
  box-shadow:
    inset 0 0 0 2px $color,
    $shadow-size $shadow-color;
}

@mixin sky-theme-modern-border-invalid() {
  border: none;
  box-shadow: inset 0 0 0 2px var(--sky-highlight-color-danger);
}

// Adds 1px padding to each side to adjust for the use of an inset box shadow instead
// of a border.
@function sky-theme-modern-border-padding($padding) {
  @for $i from 1 through length($padding) {
    $padding: set-nth($padding, $i, nth($padding, $i) + 1px);
  }

  @return $padding;
}
