////
/// @group theme
////

@import './variables';
@import './functions';
@import './helpers';

/// Applies one of theme values to the provided property.
///
/// @example scss - Example Theme Application
///   html {
///     @include rmd-theme(background-color, background);
///     @include rmd-theme(color, text-primary-on-background);
///   }
///
///   .primary-bg {
///     @include rmd-theme(background-color, primary);
///   }
///
///   .primary-text {
///     @include rmd-theme(color, primary);
///   }
///
/// @param {String} property - This is normally `color` or `background-color`,
/// but any valid CSS property that accepts color values can be used.
/// @param {String} theme-style - The type of theme style to use. This should be
/// one of the `$rmd-theme-values` or a literal color value.
@mixin rmd-theme($property, $theme-style) {
  @include rmd-theme-apply-rmd-var(
    $property,
    $theme-style,
    $rmd-theme-values,
    theme
  );
}

/// This is an extremely simple mixin that will allow you to quickly set or
/// update the value of a theme css variable with the new provided value.
///
/// @example scss - Example Usage SCSS
///   $rmd-theme-primary: $rmd-blue-500;
///   $rmd-theme-secondary: $rmd-pink-a-200;
///
///   .some-class-with-different-themes {
///     // no idea if these colors go together...
///     @include rmd-theme-update-var(primary, $rmd-orange-500);
///     @include rmd-theme-update-var(secondary, $rmd-brown-700);
///   }
///
/// @param {String} theme-style - The react-md theme style to update. This
/// should be one of the keys of `$rmd-theme-values` map.
/// @param {Color} value - The updated color value to apply.
@mixin rmd-theme-update-var($theme-style, $value) {
  @include rmd-theme-update-rmd-var(
    $value,
    $theme-style,
    $rmd-theme-values,
    theme
  );
}

/// Conditionally adds styles only when the `$rmd-theme-dark-elevation`
/// variable is set to `true`. This will also work with the
/// `$rmd-theme-dark-class` variable to either set the styles with a media
/// query or only when the dark class has been enabled on a parent element.
///
/// Note: This will have a higher specificity than other variables so the colors
/// might not be as expected. It is recommended to set a custom CSS variable
/// instead of using this mixin.
///
/// @example scss - Simple Example
///   .container {
///     @include rmd-theme-dark-elevation-styles {
///       background-color: red;
///     }
///   }
///
///   @include rmd-theme-dark-elevation-styles($selector: null) {
///     --container-bg: orange;
///   }
///
///   @include rmd-theme-dark-elevation-styles($selector: '.rmd-menu') {
///     --container-bg: blue;
///   }
///
///   .container-2 {
///     background-color: var(--container-bg, red);
///   }
///
/// @example scss - Simple Prefers Color Scheme
///   @use "react-md" as * with (
///     $rmd-theme-dark-class: 'prefers-color-scheme',
///   );
///   // OVERRIDE_USE
///
///   .container {
///     @include rmd-theme-dark-elevation-styles {
///       background-color: red;
///     }
///   }
///
///   @include rmd-theme-dark-elevation-styles($selector: ':root') {
///     --container-bg: orange;
///   }
///
///   @include rmd-theme-dark-elevation-styles($selector: '.rmd-menu') {
///     --container-bg: blue;
///   }
///
///   .container-2 {
///     background-color: var(--container-bg, red);
///   }
///
/// @example scss - CSS Module Example
///   .container {
///     @include rmd-theme-dark-elevation-styles(true) {
///       background-color: red;
///     }
///   }
///
///   @include rmd-theme-dark-elevation-styles(true, null) {
///     --container-bg: orange;
///   }
///
///   @include rmd-theme-dark-elevation-styles(true, '.rmd-menu') {
///     --container-bg: blue;
///   }
///
///   .container-2 {
///     background-color: var(--container-bg, red);
///   }
///
/// @example scss - CSS Module Prefers Color Scheme Example
///   @use "react-md" as * with (
///     $rmd-theme-dark-class: 'prefers-color-scheme',
///   );
///   // OVERRIDE_USE
///
///   .container {
///     @include rmd-theme-dark-elevation-styles(true) {
///       background-color: red;
///     }
///   }
///
///   @include rmd-theme-dark-elevation-styles(true, ':root') {
///     --container-bg: orange;
///   }
///
///   @include rmd-theme-dark-elevation-styles(true, '.rmd-menu') {
///     --container-bg: blue;
///   }
///
///   .container-2 {
///     background-color: var(--container-bg, red);
///   }
///
/// @since 2.5.4
/// @param {Boolean} css-modules [false] - Boolean if this is being used within
/// CSS Modules which will update the selector to work correctly by wrapping
/// different parts with `:global` and `:local`.
/// @param {String} selector ['&'] - An optional selector to use if the
/// `$rmd-theme-dark-class` is `'prefers-color-scheme'`. Otherwise, setting this
/// to a value other than `'&'` will be joined to the `$rmd-theme-dark-class`.
@mixin rmd-theme-dark-elevation-styles($css-modules: false, $selector: '&') {
  @if $rmd-theme-dark-elevation {
    @if $rmd-theme-dark-class == 'prefers-color-scheme' {
      @media (prefers-color-scheme: dark) {
        #{$selector} {
          @content;
        }
      }
    } @else {
      $parent-selector: $selector == '&';
      $class-name: if(
        $parent-selector or not $selector,
        $rmd-theme-dark-class,
        $rmd-theme-dark-class + ' ' + $selector
      );

      @include rmd-utils-optional-css-modules(
        $class-name,
        $css-modules,
        $parent-selector
      ) {
        @content;
      }
    }
  }
}

/// This mixin should normally be used with the `rmd-elevation` mixin to change
/// the background color based on the current elevation in dark themes.
///
/// Note: This will have a higher specificity than other variables so the colors
/// might not be as expected. It is recommended to set a custom CSS variable
/// instead of using this mixin.
///
/// @example scss - All z-values
///   .container {
///     @for $i from 0 to 24 {
///       @include rmd-theme-dark-elevation($i);
///     }
///   }
///
/// @example scss - All z-values with CSS Modules
///   .container {
///     @for $i from 0 to 24 {
///       @include rmd-theme-dark-elevation($i, true);
///     }
///   }
///
/// @since 2.1.0
/// @param {Number} z-value - This should be a number between 0 and 24
/// representing the current elevation.
/// @param {Boolean} css-modules [false] - Boolean if this is being used within
/// CSS Modules which will update the selector to work correctly by wrapping
/// different parts with `:global` and `:local`.
@mixin rmd-theme-dark-elevation($z-value, $css-modules: false) {
  @include rmd-theme-dark-elevation-styles($css-modules) {
    @include rmd-theme-update-var(
      background,
      map-get($rmd-theme-dark-elevation-colors, $z-value)
    );
    @include rmd-theme(background-color, background);
  }
}

/// This mixin can be used to apply the light theme by updating **every** color
/// theme variable across all react-md packages.
///
/// Note: You'll still need to ensure that all the package's mixins were
/// imported to get this to work.
@mixin rmd-theme-light {
  @include rmd-theme-update-var(background, $rmd-theme-light-background);
  @include rmd-theme-update-var(surface, $rmd-theme-light-surface);
  @include rmd-theme-update-var(on-surface, $rmd-black-base);
  @include rmd-theme-update-var(
    text-primary-on-background,
    $rmd-theme-primary-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-secondary-on-background,
    $rmd-theme-secondary-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-hint-on-background,
    $rmd-theme-hint-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-disabled-on-background,
    $rmd-theme-disabled-text-on-light-color
  );
  @include rmd-theme-update-var(
    text-icon-on-background,
    $rmd-theme-icon-on-light-color
  );

  @if mixin-exists(rmd-alert-theme-update-var) {
    @if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
      @include rmd-alert-theme-update-var(
        background-color,
        $rmd-toast-light-background-color
      );
    }
    @if $rmd-toast-light-color != $rmd-toast-dark-color {
      @include rmd-alert-theme-update-var(color, $rmd-toast-light-color);
    }
  }

  @if mixin-exists(rmd-app-bar-theme-update-var) {
    @include rmd-app-bar-theme-update-var(
      default-background-color,
      $rmd-app-bar-default-light-theme-background-color
    );
    @include rmd-app-bar-theme-update-var(
      default-color,
      $rmd-app-bar-default-light-theme-color
    );
  }

  @if mixin-exists(rmd-card-theme-update-var) {
    @include rmd-card-theme-update-var(
      color,
      $rmd-theme-primary-text-on-light-color
    );
    @include rmd-card-theme-update-var(
      secondary-color,
      $rmd-theme-secondary-text-on-light-color
    );

    @if $rmd-card-light-background-color != $rmd-card-dark-background-color {
      @include rmd-card-theme-update-var(
        background-color,
        $rmd-card-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-chip-theme-update-var) {
    @include rmd-chip-theme-update-var(
      solid-background-color,
      $rmd-chip-solid-light-background-color
    );
    @include rmd-chip-theme-update-var(
      solid-color,
      $rmd-chip-solid-light-color
    );
    @include rmd-chip-theme-update-var(
      solid-disabled,
      $rmd-chip-solid-light-disabled-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-background-color,
      $rmd-chip-outline-light-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-color,
      $rmd-chip-outline-light-color
    );
  }

  @if mixin-exists(rmd-dialog-theme-update-var) {
    @if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
    {
      @include rmd-dialog-theme-update-var(
        background-color,
        $rmd-dialog-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-sheet-theme-update-var) {
    @if $rmd-sheet-light-background-color != $rmd-sheet-dark-background-color {
      @include rmd-sheet-theme-update-var(
        background-color,
        $rmd-sheet-light-background-color
      );
    }
    @if $rmd-sheet-raised-light-background-color !=
      $rmd-sheet-raised-dark-background-color
    {
      @include rmd-sheet-theme-update-var(
        raised-background-color,
        $rmd-sheet-raised-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-divider-theme-update-var) {
    @include rmd-divider-theme-update-var(
      background-color,
      $rmd-divider-background-color-on-light
    );
  }

  @if mixin-exists(rmd-form-theme-update-var) {
    @include rmd-form-theme-update-var(
      text-border-color,
      $rmd-text-field-light-border-color
    );
    @include rmd-form-theme-update-var(
      text-border-hover-color,
      $rmd-text-field-light-border-hover-color
    );
    @include rmd-form-theme-update-var(
      text-filled-color,
      $rmd-text-field-filled-light-background-color
    );

    @if $rmd-listbox-light-background-color !=
      $rmd-listbox-dark-background-color
    {
      @include rmd-form-theme-update-var(
        listbox-background-color,
        $rmd-listbox-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-menu-theme-update-var) {
    @if $rmd-menu-light-background-color != $rmd-menu-dark-background-color {
      @include rmd-menu-theme-update-var(
        background-color,
        $rmd-menu-light-background-color
      );
    }
  }

  @if mixin-exists(rmd-states-theme-update-var) {
    @include rmd-states-theme-update-var(
      hover-color,
      $rmd-states-light-theme-hover-color
    );
    @include rmd-states-theme-update-var(
      focus-color,
      $rmd-states-light-theme-focus-color
    );
    @include rmd-states-theme-update-var(
      pressed-color,
      $rmd-states-light-theme-pressed-color
    );
    @include rmd-states-theme-update-var(
      selected-color,
      $rmd-states-light-theme-selected-color
    );
    @include rmd-states-theme-update-var(
      ripple-background-color,
      $rmd-states-light-theme-ripple-background-color
    );
  }

  @if mixin-exists(rmd-table-theme-update-var) {
    @include rmd-table-theme-update-var(
      border-color,
      $rmd-table-light-border-color
    );
  }

  @if mixin-exists(rmd-tabs-theme-update-var) {
    @include rmd-tabs-theme-update-var(active, $rmd-black-base);
    @include rmd-tabs-theme-update-var(
      inactive,
      $rmd-theme-secondary-text-on-light-color
    );
  }
}

/// This mixin can be used to apply the dark theme by updating **every** color theme variable across
/// all react-md packages.
///
/// This is really great to use within a media query for browsers that now support the
/// `prefers-color-scheme` so that if the user has the dark theme enabled, they'll automatically gain
/// the dark theme while using your app as well.
///
/// Note: You'll still need to ensure that all the package's mixins were imported to get this to work.
///
/// @example scss - Media Query Example
///   @media (prefers-color-scheme: dark) {
///     :root {
///       @include rmd-theme-dark;
///     }
///   }
@mixin rmd-theme-dark {
  @include rmd-theme-update-var(background, $rmd-theme-dark-background);
  @include rmd-theme-update-var(surface, $rmd-theme-dark-surface);
  @include rmd-theme-update-var(on-surface, $rmd-white-base);
  @include rmd-theme-update-var(
    text-primary-on-background,
    $rmd-theme-primary-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-secondary-on-background,
    $rmd-theme-secondary-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-hint-on-background,
    $rmd-theme-hint-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-disabled-on-background,
    $rmd-theme-disabled-text-on-dark-color
  );
  @include rmd-theme-update-var(
    text-icon-on-background,
    $rmd-theme-icon-on-dark-color
  );

  @if mixin-exists(rmd-alert-theme-update-var) {
    @if $rmd-toast-light-color != $rmd-toast-dark-color {
      @include rmd-alert-theme-update-var(
        background-color,
        $rmd-toast-dark-color
      );
    }
    @if $rmd-toast-light-background-color != $rmd-toast-dark-background-color {
      @include rmd-alert-theme-update-var(
        background-color,
        $rmd-toast-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-app-bar-theme-update-var) {
    @include rmd-app-bar-theme-update-var(
      default-background-color,
      $rmd-app-bar-default-dark-theme-background-color
    );
    @include rmd-app-bar-theme-update-var(
      default-color,
      $rmd-app-bar-default-dark-theme-color
    );
  }

  @if mixin-exists(rmd-card-theme-update-var) {
    @include rmd-card-theme-update-var(
      color,
      $rmd-theme-primary-text-on-dark-color
    );
    @include rmd-card-theme-update-var(
      secondary-color,
      $rmd-theme-secondary-text-on-dark-color
    );

    @if $rmd-card-light-background-color != $rmd-card-dark-background-color {
      @include rmd-card-theme-update-var(
        background-color,
        $rmd-card-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-chip-theme-update-var) {
    @include rmd-chip-theme-update-var(
      solid-background-color,
      $rmd-chip-solid-dark-background-color
    );
    @include rmd-chip-theme-update-var(solid-color, $rmd-chip-solid-dark-color);
    @include rmd-chip-theme-update-var(
      solid-disabled,
      $rmd-chip-solid-dark-disabled-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-background-color,
      $rmd-chip-outline-dark-background-color
    );
    @include rmd-chip-theme-update-var(
      outline-color,
      $rmd-chip-outline-dark-color
    );
  }

  @if mixin-exists(rmd-dialog-theme-update-var) {
    @if $rmd-dialog-light-background-color != $rmd-dialog-dark-background-color
    {
      @include rmd-dialog-theme-update-var(
        background-color,
        $rmd-dialog-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-sheet-theme-update-var) {
    @if $rmd-sheet-light-background-color != $rmd-sheet-dark-background-color {
      @include rmd-sheet-theme-update-var(
        background-color,
        $rmd-sheet-dark-background-color
      );
    }
    @if $rmd-sheet-raised-light-background-color !=
      $rmd-sheet-raised-dark-background-color
    {
      @include rmd-sheet-theme-update-var(
        raised-background-color,
        $rmd-sheet-raised-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-divider-theme-update-var) {
    @include rmd-divider-theme-update-var(
      background-color,
      $rmd-divider-background-color-on-dark
    );
  }

  @if mixin-exists(rmd-form-theme-update-var) {
    @include rmd-form-theme-update-var(
      text-border-color,
      $rmd-text-field-dark-border-color
    );
    @include rmd-form-theme-update-var(
      text-border-hover-color,
      $rmd-text-field-dark-border-hover-color
    );
    @include rmd-form-theme-update-var(
      text-filled-color,
      $rmd-text-field-filled-dark-background-color
    );

    @if $rmd-listbox-light-background-color !=
      $rmd-listbox-dark-background-color
    {
      @include rmd-form-theme-update-var(
        listbox-background-color,
        $rmd-listbox-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-menu-theme-update-var) {
    @if $rmd-menu-light-background-color != $rmd-menu-dark-background-color {
      @include rmd-menu-theme-update-var(
        background-color,
        $rmd-menu-dark-background-color
      );
    }
  }

  @if mixin-exists(rmd-states-theme-update-var) {
    @include rmd-states-theme-update-var(
      hover-color,
      $rmd-states-dark-theme-hover-color
    );
    @include rmd-states-theme-update-var(
      focus-color,
      $rmd-states-dark-theme-focus-color
    );
    @include rmd-states-theme-update-var(
      pressed-color,
      $rmd-states-dark-theme-pressed-color
    );
    @include rmd-states-theme-update-var(
      selected-color,
      $rmd-states-dark-theme-selected-color
    );
    @include rmd-states-theme-update-var(
      ripple-background-color,
      $rmd-states-dark-theme-ripple-background-color
    );
  }

  @if mixin-exists(rmd-table-theme-update-var) {
    @include rmd-table-theme-update-var(
      border-color,
      $rmd-table-dark-border-color
    );
  }

  @if mixin-exists(rmd-tabs-theme-update-var) {
    @include rmd-tabs-theme-update-var(active, $rmd-white-base);
    @include rmd-tabs-theme-update-var(
      inactive,
      $rmd-theme-secondary-text-on-dark-color
    );
  }
}

/// Creates all the styles for a theme in react-md. This will start by creating CSS Variables
/// for each theme variable and then create class names for each variable.
///
/// @example scss - Normal SCSS Usage
///   // declare your theme variables
///   $rmd-theme-primary: $rmd-teal-500;
///   $rmd-theme-secondary: $rmd-pink-a-400;
///
///   @include react-md-theme;
@mixin react-md-theme {
  @include rmd-theme-create-root-theme($rmd-theme-values, theme);
}