@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

//$_button-border-radius: config.$config-global-border-radius !default;
$_cds-button-border-radius: var(--cds-button-br) !default;

//GROUPABLE
.cds-button-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    &>.cds-button:not(:first-of-type):not(:last-of-type):not(:only-child) {
        border-radius: 0;
        border-right: none;
    }

    &>.cds-button:first-of-type:not(:only-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }

    &>.cds-button:last-of-type:not(:only-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.cds-button {
    border-radius: $_cds-button-border-radius;
    padding: vars.$cds-spacing-50;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: vars.$cds-size-250;
    white-space: nowrap;
    width: fit-content;

    @include mixins.cds-secondary;

    &:hover {
        @include mixins.cds-secondary--hover;
    }

    &:active {
        @include mixins.cds-secondary--active;
    }

    &.is-disabled,
    &:disabled {
        @include mixins.cds-secondary--disabled;
    }

    &__text {
        padding: 0 vars.$cds-spacing-50;
        height: vars.$cds-size-150;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        @include mixins.cds-paragraph-m;
    }

    &__icon {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        &::before {
            @include mixins.cds-icon-size(vars.$cds-icon-150);
        }
    }

    &.is-loading {
        pointer-events: none !important;

        & .cds-button__icon {
            @include mixins.cds-icon(config.$default-icon-spinner);
        }
    }

    &.is-selected {
        @extend :active;
    }

    &.is-danger {

        & *,
        [class^="__icon"],
        [class*="__icon "] {
            color: var(--cds-color-accent-danger-main);
        }

        &:hover *,
        &:hover .cds-button__icon {
            color: var(--cds-color-accent-danger-main--hover);
        }
    }

    /*&.is-condensed {
        height: auto;
        padding: vars.$cds-spacing-25;
    }

    &.is-expanded {
        height: auto;
        padding: vars.$cds-spacing-100;
    }*/

    //SIZE MODIFIERS
    &--small {
        padding: vars.$cds-spacing-25;
        height: auto;
        min-height: vars.$cds-size-150;
        @include mixins.cds-paragraph-s;
    }

    &--medium {
        padding: vars.$cds-spacing-50;
        height: vars.$cds-size-250;
        min-height: vars.$cds-size-250;
        @include mixins.cds-paragraph-m;
    }

    &--large {
        padding: vars.$cds-spacing-75;
        height: vars.$cds-size-350;
        min-height: vars.$cds-size-350;
        @include mixins.cds-paragraph-l;

        & [class^="__icon"]::before,
        [class*="__icon "]::before {
            @include mixins.cds-icon-size(vars.$cds-icon-200);
        }
    }

    //VARIANT MODIFIERS
    &--accent {
        @include mixins.cds-accent;

        &:hover {
            @include mixins.cds-accent--hover;
        }

        &:active {
            @include mixins.cds-accent--active;
        }

        &.is-disabled,
        &:disabled {
            @include mixins.cds-accent--disabled;
        }

        //Custom is-danger
        &.is-danger {
            background-color: var(--cds-color-accent-danger-main);
            border-color: transparent;

            & *,
            [class^="__icon"],
            [class*="__icon "] {
                color: var(--cds-color-text-inverse);
            }

            &:hover {
                background-color: var(--cds-color-accent-danger-main--hover);
                border-color: var(--cds-color-accent-danger-main--hover);

                & *,
                [class^="__icon"],
                [class*="__icon "] {
                    color: var(--cds-color-text-inverse) !important;
                }
            }

            &:active {
                background-color: var(--cds-color-accent-danger-main--active);
                border-color: var(--cds-color-accent-danger-main--active);
            }
        }
    }

    &--primary {
        @include mixins.cds-primary;

        &:hover {
            @include mixins.cds-primary--hover;
        }

        &:active {
            @include mixins.cds-primary--active;
        }

        //Custom is-danger
        &.is-danger {
            background-color: var(--cds-color-accent-danger-main);
            border-color: transparent;

            & *,
            [class^="__icon"],
            [class*="__icon "] {
                color: var(--cds-color-text-inverse);
            }

            &:hover {
                background-color: var(--cds-color-accent-danger-main--hover);
                border-color: var(--cds-color-accent-danger-main--hover);

                & *,
                [class^="__icon"],
                [class*="__icon "] {
                    color: var(--cds-color-text-inverse) !important;
                }
            }

            &:active {
                background-color: var(--cds-color-accent-danger-main--active);
                border-color: transparent;
            }
        }

        &.is-disabled,
        &:disabled {
            @include mixins.cds-primary--disabled;
        }
    }

    &--secondary {
        @include mixins.cds-secondary;

        &:hover {
            @include mixins.cds-secondary--hover;
        }

        &:active {
            @include mixins.cds-secondary--active;
        }

        &.is-disabled,
        &:disabled {
            @include mixins.cds-secondary--disabled;
        }

        //Custom is-selected
        &.is-selected {
            background-color: var(--cds-color-background-inverse--hover) !important;
            border-color: transparent !important;

            & * {
                color: var(--cds-color-text-inverse) !important;
            }
        }
    }

    &--tertiary {
        @include mixins.cds-tertiary;


        &:hover {
            @include mixins.cds-tertiary--hover;
        }

        &:active {
            @include mixins.cds-tertiary--active;
        }

        &.is-disabled,
        &:disabled {
            @include mixins.cds-tertiary--disabled;
        }
    }
}