@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/_mixins.scss

@@ -0,0 +1,1865 @@
+// ========================================================================
+// Mixins
+// Hook mixins used across all components for customization and theming.
+// Collected into the `$mixins` map for dynamic dispatch via `meta.apply()`
+//
+// Usage:
+//   @use '@broxus/react-uikit/styles/mixins' as *;
+//
+//   @if map.has-key($mixins, 'hook-button-misc') {
+//       @include meta.apply(map.get($mixins, 'hook-button-misc'));
+//   }
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+@use 'variables' as *;
+@use 'utils';
+
+@mixin hook-alert() {
+    a:not([class]) {
+        color: inherit;
+        text-decoration: underline;
+    }
+}
+
+@mixin hook-alert-misc() {
+    /*
+     * Content
+     */
+
+    .#{$prefix}-alert h1,
+    .#{$prefix}-alert h2,
+    .#{$prefix}-alert h3,
+    .#{$prefix}-alert h4,
+    .#{$prefix}-alert h5,
+    .#{$prefix}-alert h6 {
+        color: inherit;
+    }
+
+    .#{$prefix}-alert a:not([class]) {
+        color: inherit;
+        text-decoration: underline;
+    }
+
+    .#{$prefix}-alert a:not([class]):hover {
+        color: inherit;
+        text-decoration: underline;
+    }
+}
+
+@mixin hook-button-misc() {
+    .#{$prefix}-button-group {
+        .#{$prefix}-button-circle:not(:last-child),
+        .#{$prefix}-button-round:not(:last-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .#{$prefix}-button-circle:not(:first-child),
+        .#{$prefix}-button-round:not(:first-child) {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+    }
+}
+
+$mixins: (
+    hook-alert: meta.get-mixin('hook-alert'),
+    hook-alert-misc: meta.get-mixin('hook-alert-misc'),
+    hook-button-misc: meta.get-mixin('hook-button-misc'),
+    svg-fill: meta.get-mixin('svg-fill', 'utils'),
+) !default;
+
+
+// Inverse component mixins
+// ==========================================================================
+
+@mixin hook-inverse-component-accordion() {
+    .#{$prefix}-accordion > :nth-child(n + 2) {
+        @if map.has-key($mixins, 'hook-inverse-accordion-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-accordion-item'));
+        }
+    }
+
+    .#{$prefix}-accordion-title {
+        color: var(--inverse-accordion-title-color);
+        @if map.has-key($mixins, 'hook-inverse-accordion-title') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-accordion-title'));
+        }
+    }
+
+    .#{$prefix}-accordion-title:hover,
+    .#{$prefix}-accordion-title:focus {
+        color: var(--inverse-accordion-title-hover-color);
+    }
+
+    .#{$prefix}-accordion-item-disabled {
+        color: var(--inverse-accordion-item-disabled-color);
+    }
+}
+
+@mixin hook-inverse-component-article() {
+    .#{$prefix}-article-title {
+        @if map.has-key($mixins, 'hook-inverse-article-title') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-article-title'));
+        }
+    }
+
+    .#{$prefix}-article-meta {
+        color: var(--inverse-article-meta-color);
+        @if map.has-key($mixins, 'hook-inverse-article-meta') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-article-meta'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-badge() {
+    .#{$prefix}-badge {
+        background-color: var(--inverse-badge-background);
+        color: var(--inverse-badge-color);
+        @if map.has-key($mixins, 'hook-inverse-badge') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-badge'));
+        }
+    }
+
+    .#{$prefix}-badge:hover,
+    .#{$prefix}-badge:focus {
+        color: var(--inverse-badge-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-badge-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-badge-hover'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-base() {
+    color: var(--inverse-base-color);
+
+    // Base
+    // ========================================================================
+
+    //
+    // Link
+    //
+
+    a,
+    .#{$prefix}-link {
+        color: var(--inverse-base-link-color);
+        @if map.has-key($mixins, 'hook-inverse-base-link') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-link'));
+        }
+    }
+
+    a:hover,
+    .#{$prefix}-link:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link {
+        color: var(--inverse-base-link-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-base-link-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-link-hover'));
+        }
+    }
+
+    //
+    // Code
+    //
+
+    :not(pre) > code,
+    :not(pre) > kbd,
+    :not(pre) > samp {
+        color: var(--inverse-base-code-color);
+        @if map.has-key($mixins, 'hook-inverse-base-code') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-code'));
+        }
+    }
+
+    //
+    // Emphasize
+    //
+
+    em {
+        color: var(--inverse-base-em-color);
+    }
+
+    //
+    // Headings
+    //
+
+    h1,
+    .#{$prefix}-h1,
+    h2,
+    .#{$prefix}-h2,
+    h3,
+    .#{$prefix}-h3,
+    h4,
+    .#{$prefix}-h4,
+    h5,
+    .#{$prefix}-h5,
+    h6,
+    .#{$prefix}-h6,
+    .#{$prefix}-heading-small,
+    .#{$prefix}-heading-medium,
+    .#{$prefix}-heading-large,
+    .#{$prefix}-heading-xlarge,
+    .#{$prefix}-heading-2xlarge {
+        color: var(--inverse-base-heading-color);
+        @if map.has-key($mixins, 'hook-inverse-base-heading') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-heading'));
+        }
+    }
+
+    h1,
+    .#{$prefix}-h1 {
+        @if map.has-key($mixins, 'hook-inverse-base-h1') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-h1'));
+        }
+    }
+
+    h2,
+    .#{$prefix}-h2 {
+        @if map.has-key($mixins, 'hook-inverse-base-h2') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-h2'));
+        }
+    }
+
+    h3,
+    .#{$prefix}-h3 {
+        @if map.has-key($mixins, 'hook-inverse-base-h3') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-h3'));
+        }
+    }
+
+    h4,
+    .#{$prefix}-h4 {
+        @if map.has-key($mixins, 'hook-inverse-base-h4') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-h4'));
+        }
+    }
+
+    h5,
+    .#{$prefix}-h5 {
+        @if map.has-key($mixins, 'hook-inverse-base-h5') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-h5'));
+        }
+    }
+
+    h6,
+    .#{$prefix}-h6 {
+        @if map.has-key($mixins, 'hook-inverse-base-h6') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-h6'));
+        }
+    }
+
+    //
+    // Blockquotes
+    //
+
+    blockquote {
+        @if map.has-key($mixins, 'hook-inverse-base-blockquote') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-blockquote'));
+        }
+    }
+
+    blockquote footer {
+        @if map.has-key($mixins, 'hook-inverse-base-blockquote-footer') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-blockquote-footer'));
+        }
+    }
+
+    //
+    // Horizontal rules
+    //
+
+    hr,
+    .#{$prefix}-hr {
+        border-top-color: var(--inverse-base-hr-border);
+
+        @if map.has-key($mixins, 'hook-inverse-base-hr') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-base-hr'));
+        }
+    }
+
+    //
+    // Focus
+    //
+
+    :focus,
+    :focus-visible {
+        outline-color: var(--inverse-base-focus-outline);
+    }
+}
+
+@mixin hook-inverse-component-breadcrumb() {
+    .#{$prefix}-breadcrumb > * > * {
+        color: var(--inverse-breadcrumb-item-color);
+        @if map.has-key($mixins, 'hook-inverse-breadcrumb-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-breadcrumb-item'));
+        }
+    }
+
+    .#{$prefix}-breadcrumb > * > :hover,
+    .#{$prefix}-breadcrumb > * > :focus {
+        color: var(--inverse-breadcrumb-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-breadcrumb-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-breadcrumb-item-hover'));
+        }
+    }
+
+    .#{$prefix}-breadcrumb > .#{$prefix}-disabled > * {
+        @if map.has-key($mixins, 'hook-inverse-breadcrumb-item-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-breadcrumb-item-disabled'));
+        }
+    }
+
+    .#{$prefix}-breadcrumb > :last-child > * {
+        color: var(--inverse-breadcrumb-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-breadcrumb-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-breadcrumb-item-active'));
+        }
+    }
+
+    //
+    // Divider
+    //
+
+    .#{$prefix}-breadcrumb > :nth-child(n + 2):not(.#{$prefix}-first-column)::before {
+        color: var(--inverse-breadcrumb-divider-color);
+        @if map.has-key($mixins, 'hook-inverse-breadcrumb-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-breadcrumb-divider'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-button() {
+    .#{$prefix}-button {
+        color: var(--inverse-button-color);
+        @if map.has-key($mixins, 'hook-inverse-button') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button'));
+        }
+    }
+
+    //
+    // Default
+    //
+
+    .#{$prefix}-button-default {
+        background-color: var(--inverse-button-default-background);
+        color: var(--inverse-button-default-color);
+        @if map.has-key($mixins, 'hook-inverse-button-default') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-default'));
+        }
+    }
+
+    .#{$prefix}-button-default:hover,
+    .#{$prefix}-button-default:focus {
+        background-color: var(--inverse-button-default-hover-background);
+        color: var(--inverse-button-default-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-button-default-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-default-hover'));
+        }
+    }
+
+    .#{$prefix}-button-default:active,
+    .#{$prefix}-button-default.#{$prefix}-active {
+        background-color: var(--inverse-button-default-active-background);
+        color: var(--inverse-button-default-active-color);
+        @if map.has-key($mixins, 'hook-inverse-button-default-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-default-active'));
+        }
+    }
+
+    //
+    // Primary
+    //
+
+    .#{$prefix}-button-primary {
+        background-color: var(--inverse-button-primary-background);
+        color: var(--inverse-button-primary-color);
+        @if map.has-key($mixins, 'hook-inverse-button-primary') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-primary'));
+        }
+    }
+
+    .#{$prefix}-button-primary:hover,
+    .#{$prefix}-button-primary:focus {
+        background-color: var(--inverse-button-primary-hover-background);
+        color: var(--inverse-button-primary-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-button-primary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-primary-hover'));
+        }
+    }
+
+    .#{$prefix}-button-primary:active,
+    .#{$prefix}-button-primary.#{$prefix}-active {
+        background-color: var(--inverse-button-primary-active-background);
+        color: var(--inverse-button-primary-active-color);
+        @if map.has-key($mixins, 'hook-inverse-button-primary-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-primary-active'));
+        }
+    }
+
+    //
+    // Secondary
+    //
+
+    .#{$prefix}-button-secondary {
+        background-color: var(--inverse-button-secondary-background);
+        color: var(--inverse-button-secondary-color);
+        @if map.has-key($mixins, 'hook-inverse-button-secondary') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-secondary'));
+        }
+    }
+
+    .#{$prefix}-button-secondary:hover,
+    .#{$prefix}-button-secondary:focus {
+        background-color: var(--inverse-button-secondary-hover-background);
+        color: var(--inverse-button-secondary-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-button-secondary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-secondary-hover'));
+        }
+    }
+
+    .#{$prefix}-button-secondary:active,
+    .#{$prefix}-button-secondary.#{$prefix}-active {
+        background-color: var(--inverse-button-secondary-active-background);
+        color: var(--inverse-button-secondary-active-color);
+        @if map.has-key($mixins, 'hook-inverse-button-secondary-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-secondary-active'));
+        }
+    }
+
+    //
+    // Tertiary
+    //
+
+    .#{$prefix}-button-tertiary {
+        background-color: var(--inverse-button-tertiary-background);
+        color: var(--inverse-button-tertiary-color);
+        @if map.has-key($mixins, 'hook-inverse-button-tertiary') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-tertiary'));
+        }
+    }
+
+    .#{$prefix}-button-tertiary:hover,
+    .#{$prefix}-button-tertiary:focus {
+        background-color: var(--inverse-button-tertiary-hover-background);
+        color: var(--inverse-button-tertiary-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-button-tertiary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-tertiary-hover'));
+        }
+    }
+
+    .#{$prefix}-button-tertiary:active,
+    .#{$prefix}-button-tertiary.#{$prefix}-active {
+        background-color: var(--inverse-button-tertiary-active-background);
+        color: var(--inverse-button-tertiary-active-color);
+        @if map.has-key($mixins, 'hook-inverse-button-tertiary-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-tertiary-active'));
+        }
+    }
+
+    //
+    // Danger
+    //
+
+    .#{$prefix}-button-danger {
+        background-color: var(--inverse-button-danger-background);
+        color: var(--inverse-button-danger-color);
+        @if map.has-key($mixins, 'hook-inverse-button-danger') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-danger'));
+        }
+    }
+
+    .#{$prefix}-button-danger:hover,
+    .#{$prefix}-button-danger:focus {
+        background-color: var(--inverse-button-danger-hover-background);
+        color: var(--inverse-button-danger-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-button-danger-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-danger-hover'));
+        }
+    }
+
+    .#{$prefix}-button-danger:active,
+    .#{$prefix}-button-danger.#{$prefix}-active {
+        background-color: var(--inverse-button-danger-active-background);
+        color: var(--inverse-button-danger-active-color);
+        @if map.has-key($mixins, 'hook-inverse-button-danger-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-danger-active'));
+        }
+    }
+
+    //
+    // Text
+    //
+
+    .#{$prefix}-button-text {
+        color: var(--inverse-button-text-color);
+        @if map.has-key($mixins, 'hook-inverse-button-text') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-text'));
+        }
+    }
+
+    .#{$prefix}-button-text:hover,
+    .#{$prefix}-button-text:focus {
+        color: var(--inverse-button-text-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-button-text-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-text-hover'));
+        }
+    }
+
+    .#{$prefix}-button-text:disabled {
+        color: var(--inverse-button-text-disabled-color);
+        @if map.has-key($mixins, 'hook-inverse-button-text-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-text-disabled'));
+        }
+    }
+
+    //
+    // Link
+    //
+
+    .#{$prefix}-button-link {
+        color: var(--inverse-button-link-color);
+        @if map.has-key($mixins, 'hook-inverse-button-link') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-link'));
+        }
+    }
+
+    .#{$prefix}-button-link:hover,
+    .#{$prefix}-button-link:focus {
+        color: var(--inverse-button-link-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-button-link-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-link-hover'));
+        }
+    }
+
+    .#{$prefix}-button-link:disabled {
+        @if map.has-key($mixins, 'hook-inverse-button-link-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-button-link-disabled'));
+        }
+    }
+
+}
+
+@mixin hook-inverse-component-card() {
+    &.#{$prefix}-card-badge {
+        background-color: var(--inverse-card-badge-background);
+        color: var(--inverse-card-badge-color);
+        @if map.has-key($mixins, 'hook-inverse-card-badge') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-card-badge'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-close() {
+    .#{$prefix}-close {
+        color: var(--inverse-close-color);
+        @if map.has-key($mixins, 'hook-inverse-close') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-close'));
+        }
+    }
+
+    .#{$prefix}-close:hover,
+    .#{$prefix}-close:focus {
+        color: var(--inverse-close-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-close-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-close-hover'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-column() {
+    .#{$prefix}-column-divider {
+        column-rule-color: var(--inverse-column-divider-rule-color);
+    }
+}
+
+@mixin hook-inverse-component-control() {
+    .#{$prefix}-control {
+        background-color: var(--inverse-control-background);
+        border-color: var(--inverse-control-border);
+        color: var(--inverse-control-color);
+        @if map.has-key($mixins, 'hook-inverse-control') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control'));
+        }
+    }
+
+    // Hover state (unused for disabled state)
+    .#{$prefix}-control:hover {
+        background-color: var(--inverse-control-hover-background);
+        border-color: var(--inverse-control-hover-border);
+        color: var(--inverse-control-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-control-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control-hover'));
+        }
+    }
+
+    // Focus state (unused for disabled state)
+    .#{$prefix}-control:focus-within {
+        background-color: var(--inverse-control-focus-background);
+        border-color: var(--inverse-control-focus-border);
+        color: var(--inverse-control-focus-color);
+        @if map.has-key($mixins, 'hook-inverse-control-focus') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control-focus'));
+        }
+    }
+
+    // Disabled state
+    .#{$prefix}-control.#{$prefix}-disabled {
+        background-color: var(--inverse-control-disabled-background);
+        border-color: var(--inverse-control-disabled-border);
+        color: var(--inverse-control-disabled-color);
+        @if map.has-key($mixins, 'hook-inverse-control-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control-disabled'));
+        }
+    }
+
+    // Success
+    .#{$prefix}-control-success,
+    .#{$prefix}-control-success:hover,
+    .#{$prefix}-control-success:focus-within {
+        border-color: var(--control-success-border);
+        color: var(--control-success-color);
+        @if map.has-key($mixins, 'hook-inverse-control-success') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control-success'));
+        }
+    }
+
+    // Warning
+    .#{$prefix}-control-warning,
+    .#{$prefix}-control-warning:hover,
+    .#{$prefix}-control-warning:focus-within {
+        border-color: var(--control-warning-border);
+        color: var(--control-warning-color);
+        @if map.has-key($mixins, 'hook-inverse-control-warning') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control-warning'));
+        }
+    }
+
+    // Danger
+    .#{$prefix}-control-danger,
+    .#{$prefix}-control-danger:hover,
+    .#{$prefix}-control-danger:focus-within {
+        border-color: var(--control-danger-border);
+        color: var(--control-danger-color);
+        @if map.has-key($mixins, 'hook-inverse-control-danger') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control-danger'));
+        }
+    }
+
+    // Blank
+    .#{$prefix}-control-blank:focus-within {
+        border-color: var(--control-blank-focus-border);
+        @if map.has-key($mixins, 'hook-inverse-control-blank-focus') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-control-blank-focus'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-description() {
+    .#{$prefix}-description-list > dt {
+        color: var(--inverse-description-list-term-color);
+        @if map.has-key($mixins, 'hook-inverse-description-list-term') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-description-list-term'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-divider() {
+    .#{$prefix}-divider-icon {
+        @if map.has-key($mixins, 'svg-fill') {
+            @include meta.apply(map.get($mixins, 'svg-fill'), $internal-divider-icon-image, '#000', $inverse-divider-icon-color);
+        }
+        @if map.has-key($mixins, 'hook-inverse-divider-icon') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-divider-icon'));
+        }
+    }
+
+    .#{$prefix}-divider-icon::before,
+    .#{$prefix}-divider-icon::after {
+        border-bottom-color: var(--inverse-divider-icon-line-border);
+        @if map.has-key($mixins, 'hook-inverse-divider-icon-line') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-divider-icon-line'));
+        }
+    }
+
+    .#{$prefix}-divider-small::after {
+        border-top-color: var(--inverse-divider-small-border);
+        @if map.has-key($mixins, 'hook-inverse-divider-small') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-divider-small'));
+        }
+    }
+
+    .#{$prefix}-divider-vertical {
+        border-left-color: var(--inverse-divider-vertical-border);
+        @if map.has-key($mixins, 'hook-inverse-divider-vertical') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-divider-vertical'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-dotnav() {
+    .#{$prefix}-dotnav > * > * {
+        background-color: var(--inverse-dotnav-item-background);
+        @if map.has-key($mixins, 'hook-inverse-dotnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dotnav-item'));
+        }
+    }
+
+    .#{$prefix}-dotnav > * > :hover,
+    .#{$prefix}-dotnav > * > :focus {
+        background-color: var(--inverse-dotnav-item-hover-background);
+        @if map.has-key($mixins, 'hook-inverse-dotnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dotnav-item-hover'));
+        }
+    }
+
+    .#{$prefix}-dotnav > * > :active {
+        background-color: var(--inverse-dotnav-item-onclick-background);
+        @if map.has-key($mixins, 'hook-inverse-dotnav-item-onclick') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dotnav-item-onclick'));
+        }
+    }
+
+    .#{$prefix}-dotnav > .#{$prefix}-active > * {
+        background-color: var(--inverse-dotnav-item-active-background);
+        @if map.has-key($mixins, 'hook-inverse-dotnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dotnav-item-active'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-dropdown() {
+    .#{$prefix}-dropdown {
+        background: var(--inverse-dropdown-background);
+        color: var(--inverse-dropdown-color);
+        @if map.has-key($mixins, 'hook-inverse-dropdown') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dropdown'));
+        }
+    }
+
+    .#{$prefix}-dropdown-nav > li > a {
+        color: var(--inverse-dropdown-nav-item-color);
+        @if map.has-key($mixins, 'hook-inverse-dropdown-nav-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dropdown-nav-item'));
+        }
+    }
+
+    .#{$prefix}-dropdown-nav > li > a:hover,
+    .#{$prefix}-dropdown-nav > li > a:focus,
+    .#{$prefix}-dropdown-nav > li.#{$prefix}-active > a {
+        color: var(--inverse-dropdown-nav-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-dropdown-nav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dropdown-nav-item-hover'));
+        }
+    }
+
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-header {
+        color: var(--inverse-dropdown-nav-header-color);
+        @if map.has-key($mixins, 'hook-inverse-dropdown-nav-header') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dropdown-nav-header'));
+        }
+    }
+
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-divider {
+        border-color: var(--inverse-dropdown-nav-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-dropdown-nav-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dropdown-nav-divider'));
+        }
+    }
+
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub a {
+        color: var(--inverse-dropdown-nav-sublist-item-color);
+    }
+
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub a:focus,
+    .#{$prefix}-dropdown-nav .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--inverse-dropdown-nav-sublist-item-hover-color);
+    }
+}
+
+@mixin hook-inverse-component-form() {
+    .#{$prefix}-input,
+    .#{$prefix}-textarea {
+        background-clip: padding-box;
+        background-color: var(--inverse-form-background);
+        color: var(--inverse-form-color);
+        @if map.has-key($mixins, 'hook-inverse-form') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-form'));
+        }
+
+        &:focus {
+            background-color: var(--inverse-form-focus-background);
+            color: var(--inverse-form-focus-color);
+            @if map.has-key($mixins, 'hook-inverse-form-focus') {
+                @include meta.apply(map.get($mixins, 'hook-inverse-form-focus'));
+            }
+        }
+    }
+
+    //
+    // Placeholder
+    //
+
+    .#{$prefix}-input::-ms-input-placeholder {
+        color: var(--inverse-form-placeholder-color) !important;
+    }
+
+    .#{$prefix}-input::placeholder {
+        color: var(--inverse-form-placeholder-color);
+    }
+
+    .#{$prefix}-textarea::-ms-input-placeholder {
+        color: var(--inverse-form-placeholder-color) !important;
+    }
+
+    .#{$prefix}-textarea::placeholder {
+        color: var(--inverse-form-placeholder-color);
+    }
+
+    //
+    // Datalist
+    //
+
+    .#{$prefix}-input[list]:hover,
+    .#{$prefix}-input[list]:focus {
+        @if map.has-key($mixins, 'svg-fill') {
+            @include meta.apply(map.get($mixins, 'svg-fill'), $form-icon-datalist-image-path, '#000', $inverse-form-datalist-icon-color);
+        }
+    }
+
+    // Label
+    .#{$prefix}-form-label {
+        @if map.has-key($mixins, 'hook-inverse-form-label') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-form-label'));
+        }
+    }
+
+    // Icon
+    .#{$prefix}-form-icon {
+        color: var(--inverse-form-icon-color);
+    }
+
+    .#{$prefix}-form-icon:hover {
+        color: var(--inverse-form-icon-hover-color);
+    }
+}
+
+@mixin hook-inverse-component-grid() {
+    .#{$prefix}-grid-divider > :not(.#{$prefix}-first-column)::before {
+        border-left-color: var(--inverse-grid-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-grid-divider-horizontal') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-grid-divider-horizontal'));
+        }
+    }
+
+    .#{$prefix}-grid-divider.#{$prefix}-grid-stack > .#{$prefix}-grid-margin::before {
+        border-top-color: var(--inverse-grid-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-grid-divider-vertical') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-grid-divider-vertical'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-heading() {
+    .#{$prefix}-heading-small {
+        @if map.has-key($mixins, 'hook-inverse-heading-small') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-small'));
+        }
+    }
+
+    .#{$prefix}-heading-medium {
+        @if map.has-key($mixins, 'hook-inverse-heading-medium') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-medium'));
+        }
+    }
+
+    .#{$prefix}-heading-large {
+        @if map.has-key($mixins, 'hook-inverse-heading-large') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-large'));
+        }
+    }
+
+    .#{$prefix}-heading-xlarge {
+        @if map.has-key($mixins, 'hook-inverse-heading-xlarge') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-xlarge'));
+        }
+    }
+
+    .#{$prefix}-heading-2xlarge {
+        @if map.has-key($mixins, 'hook-inverse-heading-2xlarge') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-2xlarge'));
+        }
+    }
+
+    .#{$prefix}-heading-divider {
+        border-bottom-color: var(--inverse-heading-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-heading-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-divider'));
+        }
+    }
+
+    .#{$prefix}-heading-bullet::before {
+        border-left-color: var(--inverse-heading-bullet-border);
+        @if map.has-key($mixins, 'hook-inverse-heading-bullet') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-bullet'));
+        }
+    }
+
+    .#{$prefix}-heading-line > ::before,
+    .#{$prefix}-heading-line > ::after {
+        border-bottom-color: var(--inverse-heading-line-border);
+        @if map.has-key($mixins, 'hook-inverse-heading-line') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-heading-line'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-icon() {
+    //
+    // Link
+    //
+
+    .#{$prefix}-icon-link {
+        color: var(--inverse-icon-link-color);
+        @if map.has-key($mixins, 'hook-inverse-icon-link') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-icon-link'));
+        }
+    }
+
+    .#{$prefix}-icon-link:hover,
+    .#{$prefix}-icon-link:focus {
+        color: var(--inverse-icon-link-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-icon-link-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-icon-link-hover'));
+        }
+    }
+
+    .#{$prefix}-icon-link:active,
+    .#{$prefix}-active > .#{$prefix}-icon-link {
+        color: var(--inverse-icon-link-active-color);
+        @if map.has-key($mixins, 'hook-inverse-icon-link-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-icon-link-active'));
+        }
+    }
+
+    //
+    // Button
+    //
+
+    .#{$prefix}-icon-button {
+        background-color: var(--inverse-icon-button-background);
+        color: var(--inverse-icon-button-color);
+        @if map.has-key($mixins, 'hook-inverse-icon-button') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-icon-button'));
+        }
+    }
+
+    .#{$prefix}-icon-button:hover,
+    .#{$prefix}-icon-button:focus {
+        background-color: var(--inverse-icon-button-hover-background);
+        color: var(--inverse-icon-button-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-icon-button-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-icon-button-hover'));
+        }
+    }
+
+    .#{$prefix}-icon-button:active {
+        background-color: var(--inverse-icon-button-active-background);
+        color: var(--inverse-icon-button-active-color);
+        @if map.has-key($mixins, 'hook-inverse-icon-button-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-icon-button-active'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-iconnav() {
+    .#{$prefix}-iconnav > * > a {
+        color: var(--inverse-iconnav-item-color);
+        @if map.has-key($mixins, 'hook-inverse-iconnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-iconnav-item'));
+        }
+    }
+
+    .#{$prefix}-iconnav > * > a:hover,
+    .#{$prefix}-iconnav > * > a:focus {
+        color: var(--inverse-iconnav-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-iconnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-iconnav-item-hover'));
+        }
+    }
+
+    .#{$prefix}-iconnav > .#{$prefix}-active > a {
+        color: var(--inverse-iconnav-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-iconnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-iconnav-item-active'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-label() {
+    .#{$prefix}-label {
+        background-color: var(--inverse-label-background);
+        color: var(--inverse-label-color);
+        @if map.has-key($mixins, 'hook-inverse-label') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-label'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-link() {
+    a.#{$prefix}-link-muted,
+    .#{$prefix}-link-muted a {
+        color: var(--inverse-link-muted-color);
+        @if map.has-key($mixins, 'hook-inverse-link-muted') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-link-muted'));
+        }
+    }
+
+    a.#{$prefix}-link-muted:hover,
+    .#{$prefix}-link-muted a:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link-muted,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link-muted {
+        color: var(--inverse-link-muted-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-link-muted-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-link-muted-hover'));
+        }
+    }
+
+    a.#{$prefix}-link-text:hover,
+    .#{$prefix}-link-text a:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link-text,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link-text {
+        color: var(--inverse-link-text-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-link-text-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-link-text-hover'));
+        }
+    }
+
+    a.#{$prefix}-link-heading:hover,
+    .#{$prefix}-link-heading a:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link-heading,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link-heading {
+        color: var(--inverse-link-heading-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-link-heading-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-link-heading-hover'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-list() {
+    .#{$prefix}-list-muted > ::before {
+        color: var(--inverse-list-muted-color) !important;
+    }
+
+    .#{$prefix}-list-emphasis > ::before {
+        color: var(--inverse-list-emphasis-color) !important;
+    }
+
+    .#{$prefix}-list-primary > ::before {
+        color: var(--inverse-list-primary-color) !important;
+    }
+
+    .#{$prefix}-list-secondary > ::before {
+        color: var(--inverse-list-secondary-color) !important;
+    }
+
+    .#{$prefix}-list-bullet > ::before {
+        @if map.has-key($mixins, 'svg-fill') {
+            @include meta.apply(map.get($mixins, 'svg-fill'), $list-bullet-icon-image-path, '#000', $inverse-list-bullet-icon-color);
+        }
+    }
+
+    .#{$prefix}-list-divider > :nth-child(n + 2) {
+        border-top-color: var(--inverse-list-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-list-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-list-divider'));
+        }
+    }
+
+    .#{$prefix}-list-striped > * {
+        @if map.has-key($mixins, 'hook-inverse-list-striped') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-list-striped'));
+        }
+    }
+
+    .#{$prefix}-list-striped > :nth-of-type(odd) {
+        background-color: var(--inverse-list-striped-background);
+    }
+}
+
+@mixin hook-inverse-component-marker() {
+    .#{$prefix}-marker {
+        background: var(--inverse-marker-background);
+        color: var(--inverse-marker-color);
+        @if map.has-key($mixins, 'hook-inverse-marker') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-marker'));
+        }
+    }
+
+    .#{$prefix}-marker:hover,
+    .#{$prefix}-marker:focus {
+        color: var(--inverse-marker-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-marker-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-marker-hover'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-nav() {
+    //
+    // Default
+    //
+
+    .#{$prefix}-nav-default > li > a {
+        color: var(--inverse-nav-default-item-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-default-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-default-item'));
+        }
+    }
+
+    .#{$prefix}-nav-default > li > a:hover,
+    .#{$prefix}-nav-default > li > a:focus {
+        color: var(--inverse-nav-default-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-default-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-default-item-hover'));
+        }
+    }
+
+    .#{$prefix}-nav-default > li.#{$prefix}-active > a {
+        color: var(--inverse-nav-default-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-default-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-default-item-active'));
+        }
+    }
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-header {
+        color: var(--inverse-nav-default-header-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-default-header') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-default-header'));
+        }
+    }
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-divider {
+        border-top-color: var(--inverse-nav-default-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-nav-default-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-default-divider'));
+        }
+    }
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub a {
+        color: var(--inverse-nav-default-sublist-item-color);
+    }
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub a:focus {
+        color: var(--inverse-nav-default-sublist-item-hover-color);
+    }
+
+    .#{$prefix}-nav-default .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--inverse-nav-default-sublist-item-active-color);
+    }
+
+    //
+    // Primary
+    //
+
+    .#{$prefix}-nav-primary > li > a {
+        color: var(--inverse-nav-primary-item-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-primary-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-primary-item'));
+        }
+    }
+
+    .#{$prefix}-nav-primary > li > a:hover,
+    .#{$prefix}-nav-primary > li > a:focus {
+        color: var(--inverse-nav-primary-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-primary-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-primary-item-hover'));
+        }
+    }
+
+    .#{$prefix}-nav-primary > li.#{$prefix}-active > a {
+        color: var(--inverse-nav-primary-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-primary-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-primary-item-active'));
+        }
+    }
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-header {
+        color: var(--inverse-nav-primary-header-color);
+        @if map.has-key($mixins, 'hook-inverse-nav-primary-header') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-primary-header'));
+        }
+    }
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-divider {
+        border-top-color: var(--inverse-nav-primary-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-nav-primary-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-nav-primary-divider'));
+        }
+    }
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub a {
+        color: var(--inverse-nav-primary-sublist-item-color);
+    }
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub a:focus {
+        color: var(--inverse-nav-primary-sublist-item-hover-color);
+    }
+
+    .#{$prefix}-nav-primary .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--inverse-nav-primary-sublist-item-active-color);
+    }
+}
+
+@mixin hook-inverse-component-navbar() {
+    .#{$prefix}-navbar-container:not(.#{$prefix}-navbar-transparent) {
+        background: var(--inverse-navbar-background);
+        @if map.has-key($mixins, 'hook-inverse-navbar-container') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-container'));
+        }
+    }
+
+    .#{$prefix}-navbar-nav > li > a {
+        color: var(--inverse-navbar-nav-item-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-nav-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-nav-item'));
+        }
+    }
+
+    .#{$prefix}-navbar-nav > li:hover > a,
+    .#{$prefix}-navbar-nav > li > a:focus,
+    .#{$prefix}-navbar-nav > li > a.#{$prefix}-open {
+        color: var(--inverse-navbar-nav-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-nav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-nav-item-hover'));
+        }
+    }
+
+    .#{$prefix}-navbar-nav > li > a:active {
+        color: var(--inverse-navbar-nav-item-onclick-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-nav-item-onclick') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-nav-item-onclick'));
+        }
+    }
+
+    .#{$prefix}-navbar-nav > li.#{$prefix}-active > a {
+        color: var(--inverse-navbar-nav-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-nav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-nav-item-active'));
+        }
+    }
+
+    .#{$prefix}-navbar-item {
+        color: var(--inverse-navbar-item-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-item'));
+        }
+    }
+
+    .#{$prefix}-navbar-toggle {
+        color: var(--inverse-navbar-toggle-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-toggle') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-toggle'));
+        }
+    }
+
+    .#{$prefix}-navbar-toggle:hover,
+    .#{$prefix}-navbar-toggle:focus,
+    .#{$prefix}-navbar-toggle.#{$prefix}-open {
+        color: var(--inverse-navbar-toggle-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-toggle-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-toggle-hover'));
+        }
+    }
+
+    .#{$prefix}-navbar-dropdown {
+        background: var(--inverse-navbar-dropdown-background);
+        color: var(--inverse-navbar-dropdown-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-dropdown') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-dropdown'));
+        }
+    }
+
+    .#{$prefix}-navbar-dropdown-nav > li > a {
+        color: var(--inverse-navbar-dropdown-nav-item-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-dropdown-nav-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-dropdown-nav-item'));
+        }
+    }
+
+    /* Hover + Focus */
+    .#{$prefix}-navbar-dropdown-nav > li > a:hover,
+    .#{$prefix}-navbar-dropdown-nav > li > a:focus {
+        color: var(--inverse-navbar-dropdown-nav-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-dropdown-nav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-dropdown-nav-item-hover'));
+        }
+    }
+
+    /* Active */
+    .#{$prefix}-navbar-dropdown-nav > li.#{$prefix}-active > a {
+        color: var(--inverse-navbar-dropdown-nav-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-dropdown-nav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-dropdown-nav-item-active'));
+        }
+    }
+
+    /*
+     * Header
+     */
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-header {
+        color: var(--inverse-navbar-dropdown-nav-header-color);
+        @if map.has-key($mixins, 'hook-inverse-navbar-dropdown-nav-header') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-dropdown-nav-header'));
+        }
+    }
+
+    /*
+     * Divider
+     */
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-divider {
+        border-color: var(--inverse-navbar-dropdown-nav-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-navbar-dropdown-nav-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-navbar-dropdown-nav-divider'));
+        }
+    }
+
+    /*
+     * Sublists
+     */
+
+    // noinspection Stylelint
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub a {
+        color: var(--inverse-navbar-dropdown-nav-sublist-item-color);
+    }
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub a:hover,
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub a:focus {
+        color: var(--inverse-navbar-dropdown-nav-sublist-item-hover-color);
+    }
+
+    .#{$prefix}-navbar-dropdown-nav .#{$prefix}-nav-sub li.#{$prefix}-active > a {
+        color: var(--inverse-navbar-dropdown-nav-sublist-item-active-color);
+    }
+
+}
+
+@mixin hook-inverse-component-pagination() {
+    .#{$prefix}-pagination > * > * {
+        color: var(--inverse-pagination-item-color);
+        @if map.has-key($mixins, 'hook-inverse-pagination-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-pagination-item'));
+        }
+    }
+
+    .#{$prefix}-pagination > * > :hover,
+    .#{$prefix}-pagination > * > :focus {
+        color: var(--inverse-pagination-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-pagination-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-pagination-item-hover'));
+        }
+    }
+
+    .#{$prefix}-pagination > .#{$prefix}-active > * {
+        color: var(--inverse-pagination-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-pagination-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-pagination-item-active'));
+        }
+    }
+
+    .#{$prefix}-pagination > .#{$prefix}-disabled > * {
+        color: var(--inverse-pagination-item-disabled-color);
+        @if map.has-key($mixins, 'hook-inverse-pagination-item-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-pagination-item-disabled'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-search() {
+    //
+    // Input
+    //
+
+    .#{$prefix}-search-input {
+        color: var(--inverse-search-color);
+    }
+
+    .#{$prefix}-search-input:-ms-input-placeholder {
+        color: var(--inverse-search-placeholder-color) !important;
+    }
+
+    .#{$prefix}-search-input::placeholder {
+        color: var(--inverse-search-placeholder-color);
+    }
+
+    //
+    // Icon
+    //
+
+    .#{$prefix}-search .#{$prefix}-search-icon {
+        color: var(--inverse-search-icon-color);
+    }
+
+    .#{$prefix}-search .#{$prefix}-search-icon:hover {
+        color: var(--inverse-search-icon-color);
+    }
+
+    //
+    // Style modifier
+    //
+
+    .#{$prefix}-search-default .#{$prefix}-search-input {
+        background-color: var(--inverse-search-default-background);
+        @if map.has-key($mixins, 'hook-inverse-search-default-input') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-search-default-input'));
+        }
+    }
+
+    .#{$prefix}-search-default .#{$prefix}-search-input:focus {
+        background-color: var(--inverse-search-default-focus-background);
+        @if map.has-key($mixins, 'hook-inverse-search-default-input-focus') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-search-default-input-focus'));
+        }
+    }
+
+    .#{$prefix}-search-navbar .#{$prefix}-search-input {
+        background-color: var(--inverse-search-navbar-background);
+        @if map.has-key($mixins, 'hook-inverse-search-navbar-input') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-search-navbar-input'));
+        }
+    }
+
+    .#{$prefix}-search-large .#{$prefix}-search-input {
+        background-color: var(--inverse-search-large-background);
+        @if map.has-key($mixins, 'hook-inverse-search-large-input') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-search-large-input'));
+        }
+    }
+
+    //
+    // Toggle
+    //
+
+    .#{$prefix}-search-toggle {
+        color: var(--inverse-search-toggle-color);
+        @if map.has-key($mixins, 'hook-inverse-search-toggle') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-search-toggle'));
+        }
+    }
+
+    .#{$prefix}-search-toggle:hover,
+    .#{$prefix}-search-toggle:focus {
+        color: var(--inverse-search-toggle-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-search-toggle-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-search-toggle-hover'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-subnav() {
+    .#{$prefix}-subnav > * > :first-child {
+        color: var(--inverse-subnav-item-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-item'));
+        }
+    }
+
+    .#{$prefix}-subnav > * > a:hover,
+    .#{$prefix}-subnav > * > a:focus {
+        color: var(--inverse-subnav-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-item-hover'));
+        }
+    }
+
+    .#{$prefix}-subnav > .#{$prefix}-active > a {
+        color: var(--inverse-subnav-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-item-active'));
+        }
+    }
+
+    //
+    // Divider
+    //
+
+    .#{$prefix}-subnav-divider > :nth-child(n + 2):not(.#{$prefix}-first-column)::before {
+        border-left-color: var(--inverse-subnav-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-subnav-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-divider'));
+        }
+    }
+
+    //
+    // Pill
+    //
+
+    .#{$prefix}-subnav-pill > * > :first-child {
+        background-color: var(--inverse-subnav-pill-item-background);
+        color: var(--inverse-subnav-pill-item-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-pill-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-pill-item'));
+        }
+    }
+
+    .#{$prefix}-subnav-pill > * > a:hover,
+    .#{$prefix}-subnav-pill > * > a:focus {
+        background-color: var(--inverse-subnav-pill-item-hover-background);
+        color: var(--inverse-subnav-pill-item-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-pill-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-pill-item-hover'));
+        }
+    }
+
+    .#{$prefix}-subnav-pill > * > a:active {
+        background-color: var(--inverse-subnav-pill-item-onclick-background);
+        color: var(--inverse-subnav-pill-item-onclick-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-pill-item-onclick') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-pill-item-onclick'));
+        }
+    }
+
+    .#{$prefix}-subnav-pill > .#{$prefix}-active > a {
+        background-color: var(--inverse-subnav-pill-item-active-background);
+        color: var(--inverse-subnav-pill-item-active-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-pill-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-pill-item-active'));
+        }
+    }
+
+    //
+    // Disabled
+    //
+
+    .#{$prefix}-subnav > .#{$prefix}-disabled > a {
+        color: var(--inverse-subnav-item-disabled-color);
+        @if map.has-key($mixins, 'hook-inverse-subnav-item-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-subnav-item-disabled'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-tabs() {
+    .#{$prefix}-tabs {
+        @if map.has-key($mixins, 'hook-inverse-tabs') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs'));
+        }
+    }
+
+    .#{$prefix}-tabs-tab,
+    .#{$prefix}-tabs-nav-more,
+    .#{$prefix}-tabs-nav-add {
+        color: var(--inverse-tabs-tab-color);
+        @if map.has-key($mixins, 'hook-inverse-tabs-tab') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-tab'));
+        }
+    }
+
+    .#{$prefix}-tabs-tab:not(.#{$prefix}-tabs-tab-disabled):hover,
+    .#{$prefix}-tabs-tab:not(.#{$prefix}-tabs-tab-disabled):focus,
+    .#{$prefix}-tabs-nav-add:hover,
+    .#{$prefix}-tabs-nav-add:focus {
+        color: var(--inverse-tabs-tab-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-tabs-tab-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-tab-hover'));
+        }
+    }
+
+    .#{$prefix}-tabs-tab-active:not(.#{$prefix}-tabs-tab-disabled) {
+        color: var(--inverse-tabs-tab-active-color);
+        @if map.has-key($mixins, 'hook-inverse-tabs-tab-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-tab-active'));
+        }
+    }
+
+    .#{$prefix}-tabs-tab-disabled {
+        color: var(--inverse-tabs-tab-disabled-color);
+        @if map.has-key($mixins, 'hook-inverse-tabs-tab-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-tab-disabled'));
+        }
+    }
+
+    .#{$prefix}-tabs-tab-remove {
+        @if map.has-key($mixins, 'hook-inverse-tabs-tab-remove') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-tab-remove'));
+        }
+    }
+
+    .#{$prefix}-tabs-tab-remove:hover {
+        @if map.has-key($mixins, 'hook-inverse-tabs-tab-remove-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-tab-remove-hover'));
+        }
+    }
+
+    .#{$prefix}-tabs-tab-remove:focus,
+    .#{$prefix}-tabs-tab-remove:active {
+        @if map.has-key($mixins, 'hook-inverse-tabs-tab-remove-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-tab-remove-active'));
+        }
+    }
+
+    .#{$prefix}-tabs-ink-bar {
+        background: var(--inverse-tabs-ink-bar-color);
+        @if map.has-key($mixins, 'hook-inverse-tabs-ink-bar') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-tabs-ink-bar'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-table() {
+    .#{$prefix}-table th {
+        color: var(--inverse-table-header-cell-color);
+        @if map.has-key($mixins, 'hook-inverse-table-header-cell') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-table-header-cell'));
+        }
+    }
+
+    .#{$prefix}-table caption {
+        color: var(--inverse-table-caption-color);
+        @if map.has-key($mixins, 'hook-inverse-table-caption') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-table-caption'));
+        }
+    }
+
+    .#{$prefix}-table > tr.#{$prefix}-active,
+    .#{$prefix}-table tbody tr.#{$prefix}-active {
+        background: var(--inverse-table-row-active-background);
+        @if map.has-key($mixins, 'hook-inverse-table-row-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-table-row-active'));
+        }
+    }
+
+    .#{$prefix}-table-divider > tr:not(:first-child),
+    .#{$prefix}-table-divider > :not(:first-child) > tr,
+    .#{$prefix}-table-divider > :first-child > tr:not(:first-child) {
+        border-top-color: var(--inverse-table-divider-border);
+        @if map.has-key($mixins, 'hook-inverse-table-divider') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-table-divider'));
+        }
+    }
+
+    .#{$prefix}-table-striped > tr:nth-of-type(odd),
+    .#{$prefix}-table-striped tbody tr:nth-of-type(odd) {
+        background: var(--inverse-table-striped-row-background);
+        @if map.has-key($mixins, 'hook-inverse-table-striped') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-table-striped'));
+        }
+    }
+
+    .#{$prefix}-table-hover > tr:hover,
+    .#{$prefix}-table-hover tbody tr:hover {
+        background: var(--inverse-table-hover-row-background);
+        @if map.has-key($mixins, 'hook-inverse-table-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-table-hover'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-text() {
+    .#{$prefix}-text-lead {
+        color: var(--inverse-text-lead-color);
+        @if map.has-key($mixins, 'hook-inverse-text-lead') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-text-lead'));
+        }
+    }
+
+    .#{$prefix}-text-meta {
+        color: var(--inverse-text-meta-color);
+        @if map.has-key($mixins, 'hook-inverse-text-meta') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-text-meta'));
+        }
+    }
+
+    .#{$prefix}-text-muted {
+        color: var(--inverse-text-muted-color) !important;
+    }
+
+    .#{$prefix}-text-emphasis {
+        color: var(--inverse-text-emphasis-color) !important;
+    }
+
+    .#{$prefix}-text-primary {
+        color: var(--inverse-text-primary-color) !important;
+    }
+
+    .#{$prefix}-text-secondary {
+        color: var(--inverse-text-secondary-color) !important;
+    }
+
+    .#{$prefix}-text-tertiary {
+        color: var(--inverse-text-tertiary-color) !important;
+    }
+}
+
+@mixin hook-inverse-component-thumbnav() {
+    .#{$prefix}-thumbnav > * > * {
+        @if map.has-key($mixins, 'hook-inverse-thumbnav-item') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-thumbnav-item'));
+        }
+    }
+
+    .#{$prefix}-thumbnav > * > :hover,
+    .#{$prefix}-thumbnav > * > :focus {
+        @if map.has-key($mixins, 'hook-inverse-thumbnav-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-thumbnav-item-hover'));
+        }
+    }
+
+    .#{$prefix}-thumbnav > .#{$prefix}-active > * {
+        @if map.has-key($mixins, 'hook-inverse-thumbnav-item-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-thumbnav-item-active'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-totop() {
+    .#{$prefix}-totop {
+        color: var(--inverse-totop-color);
+        @if map.has-key($mixins, 'hook-inverse-totop') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-totop'));
+        }
+    }
+
+    .#{$prefix}-totop:hover,
+    .#{$prefix}-totop:focus {
+        color: var(--inverse-totop-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-totop-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-totop-hover'));
+        }
+    }
+
+    .#{$prefix}-totop:active {
+        color: var(--inverse-totop-active-color);
+        @if map.has-key($mixins, 'hook-inverse-totop-active') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-totop-active'));
+        }
+    }
+}
+
+@mixin hook-inverse-component-utility() {
+    .#{$prefix}-dropcap::first-letter,
+    .#{$prefix}-dropcap p:first-of-type::first-letter {
+        @if map.has-key($mixins, 'hook-inverse-dropcap') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-dropcap'));
+        }
+    }
+
+    .#{$prefix}-logo {
+        color: var(--inverse-logo-color);
+        @if map.has-key($mixins, 'hook-inverse-logo') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-logo'));
+        }
+    }
+
+    .#{$prefix}-logo:hover,
+    .#{$prefix}-logo:focus {
+        color: var(--inverse-logo-hover-color);
+        @if map.has-key($mixins, 'hook-inverse-logo-hover') {
+            @include meta.apply(map.get($mixins, 'hook-inverse-logo-hover'));
+        }
+    }
+
+    .#{$prefix}-logo > :not(.#{$prefix}-logo-inverse, :only-of-type) {
+        display: none;
+    }
+
+    .#{$prefix}-logo-inverse {
+        display: inline;
+    }
+}
+
+@mixin hook-inverse-misc() {}
+
+@mixin hook-inverse() {
+    @include hook-inverse-component-base;
+    @include hook-inverse-component-link;
+    @include hook-inverse-component-heading;
+    @include hook-inverse-component-description;
+    @include hook-inverse-component-divider;
+    @include hook-inverse-component-list;
+    @include hook-inverse-component-icon;
+    @include hook-inverse-component-card;
+    @include hook-inverse-component-form;
+    @include hook-inverse-component-control;
+    @include hook-inverse-component-button;
+    @include hook-inverse-component-grid;
+    @include hook-inverse-component-close;
+
+    // @include hook-inverse-component-totop;
+    @include hook-inverse-component-badge;
+    @include hook-inverse-component-label;
+
+    //@include hook-inverse-component-leader;
+    @include hook-inverse-component-article;
+
+    @include hook-inverse-component-search;
+    @include hook-inverse-component-accordion;
+    @include hook-inverse-component-dropdown;
+    @include hook-inverse-component-nav;
+    @include hook-inverse-component-navbar;
+
+    @include hook-inverse-component-subnav;
+    @include hook-inverse-component-breadcrumb;
+
+    @include hook-inverse-component-pagination;
+
+    //@include hook-inverse-component-switch;
+    @include hook-inverse-component-tabs;
+    @include hook-inverse-component-table;
+
+    // @include hook-inverse-component-slidenav;
+    @include hook-inverse-component-dotnav;
+    @include hook-inverse-component-iconnav;
+    @include hook-inverse-component-text;
+    @include hook-inverse-component-column;
+    @include hook-inverse-component-utility;
+    @include hook-inverse-component-marker;
+
+    // @include hook-inverse-component-totop;
+
+    @include hook-inverse-misc;
+}
+
+$mixins: map.merge(
+    $mixins,
+    (
+        hook-inverse-component-accordion: meta.get-mixin('hook-inverse-component-accordion'),
+        hook-inverse-component-base: meta.get-mixin('hook-inverse-component-base'),
+        hook-inverse-component-badge: meta.get-mixin('hook-inverse-component-badge'),
+        hook-inverse-component-button: meta.get-mixin('hook-inverse-component-button'),
+        hook-inverse-component-card: meta.get-mixin('hook-inverse-component-card'),
+        hook-inverse-component-close: meta.get-mixin('hook-inverse-component-close'),
+        hook-inverse-component-description: meta.get-mixin('hook-inverse-component-description'),
+        hook-inverse-component-divider: meta.get-mixin('hook-inverse-component-divider'),
+        hook-inverse-component-form: meta.get-mixin('hook-inverse-component-form'),
+        hook-inverse-component-control: meta.get-mixin('hook-inverse-component-control'),
+        hook-inverse-component-grid: meta.get-mixin('hook-inverse-component-grid'),
+        hook-inverse-component-heading: meta.get-mixin('hook-inverse-component-heading'),
+        hook-inverse-component-icon: meta.get-mixin('hook-inverse-component-icon'),
+        hook-inverse-component-iconnav: meta.get-mixin('hook-inverse-component-iconnav'),
+        hook-inverse-component-label: meta.get-mixin('hook-inverse-component-label'),
+        hook-inverse-component-link: meta.get-mixin('hook-inverse-component-link'),
+        hook-inverse-component-list: meta.get-mixin('hook-inverse-component-list'),
+        hook-inverse-component-marker: meta.get-mixin('hook-inverse-component-marker'),
+        hook-inverse-component-nav: meta.get-mixin('hook-inverse-component-nav'),
+        hook-inverse-component-navbar: meta.get-mixin('hook-inverse-component-navbar'),
+        hook-inverse-component-pagination: meta.get-mixin('hook-inverse-component-pagination'),
+        hook-inverse-component-search: meta.get-mixin('hook-inverse-component-search'),
+        hook-inverse-component-subnav: meta.get-mixin('hook-inverse-component-subnav'),
+        hook-inverse-component-tabs: meta.get-mixin('hook-inverse-component-tabs'),
+        hook-inverse-component-table: meta.get-mixin('hook-inverse-component-table'),
+        hook-inverse-component-text: meta.get-mixin('hook-inverse-component-text'),
+        hook-inverse-component-thumbnav: meta.get-mixin('hook-inverse-component-thumbnav'),
+        hook-inverse-component-totop: meta.get-mixin('hook-inverse-component-totop'),
+        hook-inverse-component-utility: meta.get-mixin('hook-inverse-component-utility'),
+        hook-inverse-misc: meta.get-mixin('hook-inverse-misc'),
+        hook-inverse: meta.get-mixin('hook-inverse'),
+    )
+);