@use 'sass:map';

// Default Button Configuration
$default-button-config: (
    // Common
    font-family: ('Roboto', sans-serif),
    font-weight: 500,
    font-size: 1rem,
    // 16px
    padding: 0.5rem 1rem,
    // 8px 16px

    // Primary (Dark)
    primary-bg: #262125,
    primary-color: #FFFFFF,
    primary-radius: 0.5rem,
    // 8px
    primary-border: none,

    // Warning (Yellow)
    warning-bg: #F9C80E,
    warning-color: #000000,
    warning-radius: 0.5rem,
    // 4px
    warning-border: none,

    // Outline (Grey Outline)
    outline-bg: transparent,
    outline-color: #000000,
    outline-radius: 0.5rem,
    // 4px
    outline-border: 0.0625rem solid #BDC1C6,
    // 1px solid

    // Secondary (Light Grey)
    secondary-bg: #E8EAED,
    secondary-color: #000000,
    secondary-radius: 0.5rem,
    // 4px
    secondary-border: none,

    // Success (Green)
    success-bg: #16A34A,
    success-color: #FFFFFF,
    success-radius: 0.5rem,
    // 8px
    success-border: none,

    // Danger (Red)
    danger-bg: #E63E30,
    danger-color: #FFFFFF,
    danger-radius: 0.5rem,
    // 4px
    danger-border: none,

    // Danger Outline (Red Outline)
    danger-outline-bg: transparent,
    danger-outline-color: #E63E30,
    danger-outline-radius: 0.5rem,
    // 8px
    danger-outline-border: 0.0625rem solid #E63E30,
    // 1px solid

    // Disabled State
    disabled-opacity: 0.6,
    disabled-cursor: not-allowed
);

@mixin button-theme($user-config: ()) {
    $config: map.merge($default-button-config, $user-config);

    // Common
    --cc-btn-font-family: #{map.get($config, font-family)};
    --cc-btn-font-weight: #{map.get($config, font-weight)};
    --cc-btn-font-size: #{map.get($config, font-size)};
    --cc-btn-padding: #{map.get($config, padding)};
    --cc-btn-disabled-opacity: #{map.get($config, disabled-opacity)};
    --cc-btn-disabled-cursor: #{map.get($config, disabled-cursor)};

    // Primary
    --cc-btn-primary-bg: #{map.get($config, primary-bg)};
    --cc-btn-primary-color: #{map.get($config, primary-color)};
    --cc-btn-primary-radius: #{map.get($config, primary-radius)};
    --cc-btn-primary-border: #{map.get($config, primary-border)};

    // Warning
    --cc-btn-warning-bg: #{map.get($config, warning-bg)};
    --cc-btn-warning-color: #{map.get($config, warning-color)};
    --cc-btn-warning-radius: #{map.get($config, warning-radius)};
    --cc-btn-warning-border: #{map.get($config, warning-border)};

    // Outline
    --cc-btn-outline-bg: #{map.get($config, outline-bg)};
    --cc-btn-outline-color: #{map.get($config, outline-color)};
    --cc-btn-outline-radius: #{map.get($config, outline-radius)};
    --cc-btn-outline-border: #{map.get($config, outline-border)};

    // Secondary
    --cc-btn-secondary-bg: #{map.get($config, secondary-bg)};
    --cc-btn-secondary-color: #{map.get($config, secondary-color)};
    --cc-btn-secondary-radius: #{map.get($config, secondary-radius)};
    --cc-btn-secondary-border: #{map.get($config, secondary-border)};

    // Success
    --cc-btn-success-bg: #{map.get($config, success-bg)};
    --cc-btn-success-color: #{map.get($config, success-color)};
    --cc-btn-success-radius: #{map.get($config, success-radius)};
    --cc-btn-success-border: #{map.get($config, success-border)};

    // Danger
    --cc-btn-danger-bg: #{map.get($config, danger-bg)};
    --cc-btn-danger-color: #{map.get($config, danger-color)};
    --cc-btn-danger-radius: #{map.get($config, danger-radius)};
    --cc-btn-danger-border: #{map.get($config, danger-border)};

    // Danger Outline
    --cc-btn-danger-outline-bg: #{map.get($config, danger-outline-bg)};
    --cc-btn-danger-outline-color: #{map.get($config, danger-outline-color)};
    --cc-btn-danger-outline-radius: #{map.get($config, danger-outline-radius)};
    --cc-btn-danger-outline-border: #{map.get($config, danger-outline-border)};
}