/*
 * @copyright   Copyright (C) 2010-2024 Combodo SAS
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

$ibo-button--padding-y: 6px !default;
$ibo-button--padding-x: 9px !default;
$ibo-button--border: 0 !default;
$ibo-button--border-radius: $ibo-border-radius-400 !default;
$ibo-button--box-shadow-bottom: 0px 2px 0px !default;
$ibo-button--box-shadow-top: inset 0px 2px 0px !default;

$ibo-button--label--margin-left: $ibo-spacing-200 !default;

$ibo-button--vertical-align--margin-bottom: $ibo-spacing-200 !default;
$ibo-button--vertical-align--margin-top: $ibo-spacing-200 !default;

/**
* - Text color
* - Background color
* - Box shadow
* - Accent color
*/
$ibo-button-colors: (
        'regular': (
                /* Semantics */
                'neutral': (
                        '': (
                                $ibo-color-secondary-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom $ibo-color-secondary-300,
                                $ibo-color-secondary-300,
                        ),
                        ':hover': (
                                $ibo-color-secondary-200,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom $ibo-color-secondary-300,
                                $ibo-color-secondary-300,
                        ),
                        ':active': (
                                $ibo-color-secondary-200,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
                                $ibo-color-secondary-200,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                ),
                /* Primary action does not have the colors from the primary brand color, at least not for now */
                'primary': (
                        '': (
                                $ibo-color-cyan-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
                                $ibo-color-cyan-900,
                        ),
                        ':hover': (
                                $ibo-color-cyan-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
                                $ibo-color-cyan-900,
                        ),
                        ':active': (
                                $ibo-color-cyan-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-top $ibo-color-cyan-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
                                $ibo-color-cyan-900,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                ),
                'secondary': (
                        '': (
                                $ibo-color-secondary-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom $ibo-color-secondary-300,
                                $ibo-color-secondary-300,
                        ),
                        ':hover': (
                                $ibo-color-secondary-200,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom $ibo-color-secondary-300,
                                $ibo-color-secondary-300,
                        ),
                        ':active': (
                                $ibo-color-secondary-200,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
                                $ibo-color-secondary-200,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                ),
                'danger': (
                        '': (
                                $ibo-color-danger-700,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-danger-900,
                                $ibo-color-danger-800,
                        ),
                        ':hover': (
                                $ibo-color-danger-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-danger-900,
                                $ibo-color-danger-800,
                        ),
                        ':active': (
                                $ibo-color-danger-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-top $ibo-color-danger-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-800,
                                $ibo-color-danger-800,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                ),
                'success': (
                        '': (
                                $ibo-color-success-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-success-950,
                                $ibo-color-success-900,
                        ),
                        ':hover': (
                                $ibo-color-success-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-success-950,
                                $ibo-color-success-900,
                        ),
                        ':active': (
                                $ibo-color-success-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-top $ibo-color-success-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-900,
                                $ibo-color-success-900,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                ),
                /* Colors */
                'red': (
                        '': (
                                $ibo-color-red-700,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-red-900,
                                $ibo-color-red-800,
                        ),
                        ':hover': (
                                $ibo-color-red-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-red-900,
                                $ibo-color-red-800,
                        ),
                        ':active': (
                                $ibo-color-red-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-top $ibo-color-red-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-800,
                                $ibo-color-red-800,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                ),
                'green': (
                        '': (
                                $ibo-color-green-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-green-950,
                                $ibo-color-green-900,
                        ),
                        ':hover': (
                                $ibo-color-green-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-green-950,
                                $ibo-color-green-900,
                        ),
                        ':active': (
                                $ibo-color-green-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-top $ibo-color-green-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-900,
                                $ibo-color-green-900,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                ),
                'cyan': (
                        '': (
                                $ibo-color-cyan-800,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
                                $ibo-color-cyan-900,
                        ),
                        ':hover': (
                                $ibo-color-cyan-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-bottom $ibo-color-cyan-950,
                                $ibo-color-cyan-900,
                        ),
                        ':active': (
                                $ibo-color-cyan-900,
                                $ibo-color-white-100,
                                $ibo-button--box-shadow-top $ibo-color-cyan-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
                                $ibo-color-cyan-900,
                        ),
                        ':disabled': (
                                $ibo-color-grey-300,
                                $ibo-color-grey-700,
                                $ibo-button--box-shadow-top $ibo-color-grey-300,
                                $ibo-color-grey-500,
                        ),
                )
        ),
        'alternative': (
                /* Semantics */
                'neutral': (
                        '': (
                                transparent,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-grey-800,
                        ),
                        ':hover': (
                                $ibo-color-secondary-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
                                $ibo-color-grey-800,
                        ),
                        ':active': (
                                $ibo-color-secondary-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
                                $ibo-color-grey-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
                /* Primary action does not have the colors from the primary brand color, at least not for now */
                'primary': (
                        '': (
                                transparent,
                                $ibo-color-cyan-900,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-cyan-800,
                        ),
                        ':hover': (
                                $ibo-color-white-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom $ibo-color-white-100,
                                $ibo-color-grey-800,
                        ),
                        ':active': (
                                $ibo-color-white-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-top $ibo-color-white-100 #{','} $ibo-button--box-shadow-bottom $ibo-color-white-100,
                                $ibo-color-grey-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
                'secondary': (
                        '': (
                                transparent,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-grey-800,
                        ),
                        ':hover': (
                                $ibo-color-secondary-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
                                $ibo-color-grey-800,
                        ),
                        ':active': (
                                $ibo-color-secondary-100,
                                $ibo-color-grey-900,
                                $ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
                                $ibo-color-grey-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
                'danger': (
                        '': (
                                transparent,
                                $ibo-color-danger-700,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-danger-600,
                        ),
                        ':hover': (
                                $ibo-color-danger-200,
                                $ibo-color-danger-900,
                                $ibo-button--box-shadow-bottom $ibo-color-danger-200,
                                $ibo-color-danger-800,
                        ),
                        ':active': (
                                $ibo-color-danger-200,
                                $ibo-color-danger-900,
                                $ibo-button--box-shadow-top $ibo-color-danger-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-200,
                                $ibo-color-danger-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
                'success': (
                        '': (
                                transparent,
                                $ibo-color-success-900,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-success-800,
                        ),
                        ':hover': (
                                $ibo-color-success-100,
                                $ibo-color-success-900,
                                $ibo-button--box-shadow-bottom $ibo-color-success-100,
                                $ibo-color-success-800,
                        ),
                        ':active': (
                                $ibo-color-success-100,
                                $ibo-color-success-900,
                                $ibo-button--box-shadow-top $ibo-color-success-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-100,
                                $ibo-color-success-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
                /* Colors */
                'red': (
                        '': (
                                transparent,
                                $ibo-color-red-700,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-red-600,
                        ),
                        ':hover': (
                                $ibo-color-red-200,
                                $ibo-color-red-900,
                                $ibo-button--box-shadow-bottom $ibo-color-red-200,
                                $ibo-color-red-800,
                        ),
                        ':active': (
                                $ibo-color-red-200,
                                $ibo-color-red-900,
                                $ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
                                $ibo-color-red-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
                'green': (
                        '': (
                                transparent,
                                $ibo-color-green-900,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-green-800,
                        ),
                        ':hover': (
                                $ibo-color-green-100,
                                $ibo-color-green-900,
                                $ibo-button--box-shadow-bottom $ibo-color-green-100,
                                $ibo-color-green-800,
                        ),
                        ':active': (
                                $ibo-color-green-100,
                                $ibo-color-green-900,
                                $ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
                                $ibo-color-green-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
                'cyan': (
                        '': (
                                transparent,
                                $ibo-color-cyan-900,
                                $ibo-button--box-shadow-bottom transparent,
                                $ibo-color-cyan-800,
                        ),
                        ':hover': (
                                $ibo-color-cyan-100,
                                $ibo-color-cyan-900,
                                $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
                                $ibo-color-cyan-800,
                        ),
                        ':active': (
                                $ibo-color-cyan-100,
                                $ibo-color-cyan-900,
                                $ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
                                $ibo-color-cyan-800,
                        ),
                        ':disabled': (
                                transparent,
                                $ibo-color-grey-600,
                                $ibo-button--box-shadow-top transparent,
                                $ibo-color-grey-500,
                        ),
                ),
        )
) !default;
@each $sType, $aColors in $ibo-button-colors {
	@each $sColor, $aPseudoclasses in $aColors {
		@each $sPseudoclass, $sAttributes in $aPseudoclasses {
			$bg-color: nth($sAttributes, 1);
			$font-color: nth($sAttributes, 2);
			$box-shadow: nth($sAttributes, 3);
			.ibo-button.ibo-is-#{$sType}.ibo-is-#{$sColor}#{$sPseudoclass} {
				background-color: $bg-color;
				color: $font-color;
				box-shadow: $box-shadow;
			}
		}
	}
}

.ibo-button {
  position: relative;
  display: inline-block; /* Used to allow truncated text on .ibo-button--label */
  padding: $ibo-button--padding-y $ibo-button--padding-x;
  border: $ibo-button--border;
  border-radius: $ibo-button--border-radius;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap; /* To force sub elements to be on 1 line */
  @extend %ibo-font-ral-sembol-100;
  

  &.ibo-action-button {
    float: right;
  }

  .ibo-button--loading-icon {
    display: none;
  }
  
  &.ibo-is-loading {
    .ibo-button--icon{
      display: none;
    }
    .ibo-button--loading-icon {
      display: inline-block;
       &+ .ibo-button--label{
        margin-left: $ibo-button--label--margin-left;
      }
    }
  }
}

.ibo-button--label {
  @extend %ibo-text-truncated-with-ellipsis;
}

/* Only when a button has both an icon and a label */
.ibo-button--icon + .ibo-button--label {
  margin-left: $ibo-button--label--margin-left;
}

.ibo-button--vertical-align {
  margin-top: $ibo-button--vertical-align--margin-top;
  margin-bottom: $ibo-button--vertical-align--margin-bottom;
}