// ============================================================================
// Elements | Button
// ============================================================================

@use "sass:map";
@use "sass:list";

@use "../../dev" as *;
@use "../../variables" as *;
@use "../soul_type" as *;
@use "box" as *;
@use "../soul_object" as *;

// ============================================================================
// Maps
// ============================================================================

///
/// Map of predefined button sizes (width x height in baseline units)
/// @group Buttons
///
$button_size_map: (
    "xs": (
        2,
        "01"
    ),
    "sm": (
        3,
        "02"
    ),
    "md": (
        4,
        "03"
    ),
    "lg": (
        5,
        "04"
    ),
    "xl": (
        6,
        "05"
    )
) !default;

// ============================================================================
// Resets
// ============================================================================

// Basic reset and styling for button elements only
/// @group Button
@mixin button--reset {
    // Reset: Address `overflow` set to `hidden` in IE 8/9/10/11
    overflow: visible;
    height: auto;

    /// Remove the default button styling in all browsers */
    background-color: transparent;
    border-style: none;

    // Reset:  Firefox 40+, Internet Explorer 11-
    text-transform: none;

    // Specify font inheritance of form elements
    font: inherit;
    -webkit-appearance: button;
    transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);

    // Apply cursor pointer to button elements
    cursor: pointer;

    /// Remove inner padding and border in Firefox 4+
    &::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    &:-moz-focusring {
        outline: q(1) dotted ButtonText;
    }
}

button,
select {
    // Reset:  Firefox 40+, Internet Explorer 11-
    text-transform: none;
}

/// Remove the default button styling in all browsers */
button,
input,
select,
textarea {
    background-color: transparent;
    border-style: none;
}

button,
input,
optgroup,
select,
textarea {
    font: inherit; /* Specify font inheritance of form elements */
}

// Apply cursor pointer to button elements
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
    cursor: pointer;
}

/// Remove inner padding and border in Firefox 4+
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    outline: q(1) dotted ButtonText;
}

button,
  html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
  [type='reset'],
  [type='submit'] {
    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

button {
    -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
    cursor: pointer;
}

// button:hover,
// button:active,
// button:focus {
//     outline: none !important;
//     text-decoration: none !important;
//     color: rgb(1, 2, 5);
// }

// ============================================================================
// Mixins | Buttons
// ============================================================================

///
/// Mixin for base button reset + styling
/// Core button styles (base visual reset)
/// @group Buttons
///
@mixin button--base {
    @include sizing--border;
    font: inherit;
    border: none;
    cursor: pointer;
    background: transparent;
    color: inherit;
    padding: calc(q(8));
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    user-select: none;
    transition: all 0.2s ease;
    transition:
        background 0.2s ease,
        border 0.2s ease;
    border-radius: var(--border_radius, q(4));
    pointer-events: initial;
    cursor: pointer;
}

///
/// Mixin for rectangular button sizing using baseline units
/// (based on baseline box utility)
/// @param {Number} $h - Height in baseline units
/// @group Buttons
///
@mixin button--size($val) {
    $size: baseline($val);
    height: $size;
    min-height: $size;
    max-height: $size;
}

///
/// Full button style preset including base + size
/// @param {Number} $h
///
// @mixin button($h) {
//     @include button--base;
//     @include button--size($h);
// }
@mixin button($height, $font-size-key) {
    @include button--base;
    @include button--size($height);
    @include font--size($font-size-key);
}
// ==

/// Solid button variant
@mixin button--solid {
    background: var(--color_text_primary);
    color: var(--color_fill_primary);

    &:hover {
        background: var(--color_state_hover);
    }
    &:active {
        background: var(--color_state_active);
    }
    &:focus-within {
        border: q(2) solid var(--color_state_focus);
    }
    &:disabled {
        background: var(--color_state_disabled);
        color: var(--color_text_primary);
        cursor: not-allowed;
    }
}

/// Outline variant
@mixin button--outline {
    border: q(1) solid var(--color_text_primary);
    color: var(--color_text_primary);
    background: none;

    &:hover {
        background: var(--color_state_hover);
    }
    &:active {
        background: var(--color_state_active);
    }
    &:focus-within {
        border: q(2) solid var(--color_state_focus);
    }
    &:disabled {
        border-color: var(--color_state_disabled);
        color: var(--color_state_disabled);
        cursor: not-allowed;
    }
}

/// Outline variant
@mixin button--accent {
    background: var(--color_text_primary);
    color: var(--color_fill_primary);

    &:hover {
        background: var(--color_accent_primary);
    }
    &:active {
        background: var(--color_accent_primary);
    }
    &:focus-within {
        border: q(2) solid var(--color_accent_primary);
    }
    &:disabled {
        border-color: var(--color_state_disabled);
        color: var(--color_state_disabled);
        cursor: not-allowed;
    }
}

/// Clear/ghost button
@mixin button--clear {
    background: none;
    color: var(--color_text_primary);

    &:hover {
        background: var(--color_state_hover);
    }
    &:active {
        background: var(--color_state_active);
    }
    &:focus-within {
        border: q(2) solid var(--color_state_focus);
    }
    &:disabled {
        color: var(--color_state_disabled);
        cursor: not-allowed;
    }
}

// ============================================================================
// Utility Classes | Buttons
// ============================================================================

@each $name, $pair in $button_size_map {
    .#{$name} {
        @include button(list.nth($pair, 1), list.nth($pair, 2));
    }
}
// ============================================================================
// Classes
// ============================================================================

button,
.button {
    // @include button(map.get($button_size_map, 'md')); // default: md
    @include button(
        list.nth(map.get($button_size_map, "md"), 1),
        list.nth(map.get($button_size_map, "md"), 2)
    );
    @each $name, $pair in $button_size_map {
        &.#{$name} {
            @include button(list.nth($pair, 1), list.nth($pair, 2));
        }
    }

    &.solid {
        @include button--solid;
    }
    &.accent {
        @include button--accent;
    }
    &.outline {
        @include button--outline;
    }
    &.clear {
        @include button--clear;
    }
}

// Vossi

// .button {
//     display: flex;
//     flex-direction: row;
//     align-items: center;
//     justify-content: center;
//     font-weight: 700;
//     width: fit-content;
//     border-radius: q(8);
//     font-size: q(16);
//     line-height: 2q(4);
//     outline: 0;
//     text-decoration: none;
//     cursor: pointer;
// }

// .button--light-mode {
//     color: var(--color_fill_primary);
//     background-color: var(--color_text_primary);
//     border: none;
// }

// .button--light-mode path {
//     fill: var(--color_fill_primary);
// }

// .button--dark-mode path,
// .button--outline-mode path,
// .formfield-radio-buttons__option
//     .formfield-radio-buttons__radio-open-icon
//     > path {
//     fill: var(--color_text_primary);
// }

// .button--light-mode:hover {
//     background-color: #6e6e6e;
//     cursor: pointer;
// }

// .button--light-mode:disabled,
// .button--light-mode[aria-disabled="true"] {
//     background-color: rgba(12, 12, 12, 0.2);
//     cursor: not-allowed;
// }

// .button--light-mode:focus {
//     outline: var(--color_text_primary) auto;
//     outline-offset: q(2);
// }

// .button--dark-mode {
//     color: var(--color_text_primary);
//     background-color: var(--color_fill_primary);
//     border: none;
// }

// .button--dark-mode:hover {
//     background-color: #6e6e6e;
//     cursor: pointer;
// }

// .button--dark-mode:disabled,
// .button--dark-mode[aria-disabled="true"] {
//     background-color: rgba(255, 255, 255, 0.2);
//     cursor: not-allowed;
// }

// .button--outline-mode {
//     color: var(--color_text_primary);
//     background: 0 0;
//     border: q(1) solid var(--color_text_primary);
// }

// .button--outline-mode:hover {
//     background-color: #e6e6e6;
//     cursor: pointer;
// }

// .button--outline-mode:disabled,
// .button--outline-mode[aria-disabled="true"] {
//     background-color: rgba(255, 255, 255, 0.2);
//     cursor: not-allowed;
// }

// .button--red-mode {
//     color: var(--color_fill_primary);
//     background-color: var(--color_accent_primary);
//     border: none;
// }

// .button--red-mode:disabled,
// .button--red-mode[aria-disabled="true"] {
//     background-color: rgba(255, 255, 255, 0.2);
//     cursor: not-allowed;
// }

// .button--size-large {
//     padding: q(16) 3q(2);
// }

// .button--size-medium {
//     padding: q(16) 2q(4);
// }

// .button--size-small {
//     padding: q(8);
// }

// .button__icon {
//     margin-left: q(8);
//     width: 2q(4);
//     height: 2q(4);
// }