// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/// Apply a horizontal gradient
///
/// @param {color} $start
/// @param {color} $end
/// @param {string} $direction
/// @group theme
/// @example gradient-horizontal
///   @include gradient-horizontal(#000, #fff)
@mixin gradient-horizontal($start, $end, $direction: right) {
  @if alpha($start) == 1 and alpha($end) == 1 {
    background-color: $start;
    background-image: linear-gradient(to $direction, rgba($start, 0), $end);
  }

  @else {
    background-image: linear-gradient(to $direction, $start, $end);
  }
}

/// Apply a vertical gradient
///
/// @param {color} $start
/// @param {color} $end
/// @param {string} $direction
/// @group theme
/// @example gradient-vertical
///   @include gradient-vertical(#000, #fff)
@mixin gradient-vertical($start, $end, $direction: bottom) {
  @if alpha($start) == 1 and alpha($end) == 1 {
    background-color: $start;
    background-image: linear-gradient(to $direction, rgba($start, 0), $end);
  }

  @else {
    background-image: linear-gradient(to $direction, $start, $end);
  }
}


// Inverse Links
@mixin inverse-links {
  color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});

  a:not(.slds-button--neutral) {
    color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse});
    text-decoration: underline;

    &:link,
    &:visited {
      color: var(--slds-g-color-neutral-base-100, #{$color-text-link-inverse});
    }

    &:hover,
    &:focus {
      text-decoration: none;
    }

    &:active {
      color: var(--slds-g-color-neutral-100-opacity-50, #{$color-text-link-inverse-active});
    }

    &[disabled] {
      color: var(--slds-g-color-neutral-100-opacity-10, #{$color-text-link-inverse-disabled});
    }
  }
}

/// Inverse text mixin
///
/// The inverse-text mixin determines what selectors to change when on an inversed background
///
/// @param {List} $support (null) - Set to `true` to scope root styles in the mixin's wrapper class when `$globals` is `true`
@mixin inverse-text($support: null) {
  $link-selector: 'a';

  @for $i from 1 through length($support) {
    @if nth($support, $i) == 'text-utilities' {

      .slds-text-title,
      .slds-text-title_caps,
      .slds-text-title--caps {
        color: var(--slds-g-color-neutral-base-70, #{$color-text-inverse-weak});
      }
    }

    @else if nth($support, $i) == 'buttons' {
      $link-selector: 'a:not([class*="slds-button_"]):not([class*="slds-button--"]), button:not([class*="slds-button_"]):not([class*="slds-button--"])';
    }

    @else if nth($support, $i) == 'borders' {
      border-color: var(--slds-g-color-brand-base-10, #{$color-border-inverse});
    }

    @else if nth($support, $i) == 'icons' {

      .slds-icon {
        fill: currentColor;
      }
    }
  }

  color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});

  #{$link-selector} {
    color: currentColor;
    border: $border-width-thin solid transparent;
    border-radius: $border-radius-medium;

    &:hover,
    &:focus {
      text-decoration: none;
      outline: 0;
    }

    &:focus {
      box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
    }

    &:active {
      color: var(--slds-g-color-neutral-100-opacity-50, #{$color-text-link-inverse-active});
    }

    &[disabled] {
      color: var(--slds-g-color-neutral-100-opacity-10, #{$color-text-link-inverse-disabled});
    }
  }
}

/// Warning links mixin
///
/// The warning-links mixin determines how to change links when on a warning background
///
@mixin warning-links {

  a {
    color: var(--slds-g-color-neutral-base-10, #{$color-text-default}); // gray-13
    text-decoration: underline;

    &:link,
    &:visited {
      color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
    }

    &:hover,
    &:focus {
      text-decoration: none;
    }

    &:focus {
      box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
      border: $border-width-thin solid var(--slds-g-color-neutral-base-30, #{$color-gray-10});
    }

    &:active {
      color: var(--slds-g-color-neutral-base-30, #{$color-gray-10});
    }

    &[disabled] {
      color: var(--slds-g-color-neutral-base-30, #{$color-gray-10});
    }
  }
}

/// Warning buttons mixin
///
/// The warning-buttons mixin determines how to change buttons when on a warning background
///
@mixin warning-buttons {

  button:has(.slds-button__icon) {
    color: var(--slds-g-color-neutral-base-30, #{$color-gray-10});
    text-decoration: underline;

    &:hover {
      color: var(--slds-g-color-neutral-base-50, #{$color-gray-9});
    }

    &:focus {
      color: var(--slds-g-color-neutral-base-30, #{$color-gray-10});
      box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
    }

    &:active {
      color: var(--slds-g-color-neutral-base-50, #{$color-gray-9});
    }
  }
}

// Border Helper
@mixin border($borders: null, $radius: null) {
  @if $borders != null {
    @if $borders == around {
      border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
    }

    @else {
      @each $positions in $borders {
        @each $position in $positions {
          border-#{$position}: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
        }
      }
    }
  }

  @if $radius != null {
    border-radius: $radius;
    background-clip: padding-box;
  }
}



// Theme Helper
@mixin theme($theme, $borders: null) {
  @if $theme == shade {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background});
  }

  @else if $theme == inverse {
    @include inverse-links;
    background-color: var(--slds-g-color-brand-base-10, #{$color-background-inverse});
  }

  @else if $theme == alt-inverse {
    @include inverse-links;
    background-color: var(--slds-g-color-brand-base-20, #{$color-background-alt-inverse});
  }

  @else if $theme == brand {
    @include inverse-links;
    background-color: var(--slds-g-color-brand-base-30, #{$color-background-modal-brand});
  }

  @else {
    background-color: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
    color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
  }

  @include border($borders);
}



// Bounding Box for components
@mixin box($theme: null, $padding: $spacing-medium, $border-radius: $border-radius-medium, $borders: null) {
  padding: $padding;

  @if $border-radius != null {
    border-radius: $border-radius;
  }

  @if $theme != null and $borders == null {
    @include theme($theme);
  }

  @else if $theme != null and $borders != null {
    @include theme($theme, $borders);
  }

  @else if $theme == null and $borders != null {
    @include border($borders);
  }
}


// Striped Gradient
@mixin gradient-striped($stripe-color: rgba(#000, 0.025), $angle: 45deg, $color: null) {
  @if $color != null {
    background-color: $color;
  }

  background-image: linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent);
  background-size: 64px 64px;
}