@import "../../constants/style/color";

.button {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    border: 1px solid grey;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    padding: 0;
}

.buttonAlignLeft:not(.buttonHasSpace) {
    justify-content: flex-start;
}

.buttonAlignCenter:not(.buttonHasSpace) {
    justify-content: center;
}

.buttonAlignRight:not(.buttonHasSpace) {
    justify-content: flex-end;
}

.buttonHasSpace {
    justify-content: space-between;
}

.buttonHasSpace .buttonText {
    width: 100%;
}

.buttonHasSpace.buttonAlignLeft .buttonText {
    text-align: left;
}

.buttonHasSpace.buttonAlignCenter .buttonText {
    text-align: center;
}

.buttonHasSpace.buttonAlignRight .buttonText {
    text-align: right;
}

.buttonAnchor {
    text-decoration: none;
}

/*!* Size XS *!*/

.buttonSizeXs {
    min-width: 10px;
    min-height: 10px;
}

.buttonSizeXs .buttonText {
    font-size: 9px;
    line-height: 1.1;
}

.buttonSizeXs.buttonHasText,
.buttonSizeXs.buttonHasLeftIcon.buttonHasRightIcon {
    padding: 0 5px;
}

.buttonSizeXs.buttonIsRound {
    border-radius: 5px;
}

.buttonSizeXs.buttonHasText .buttonLeftIconContainer,
.buttonSizeXs.buttonHasRightIcon .buttonText,
.buttonSizeXs.buttonHasRightIcon .buttonLeftIconContainer,
.buttonSizeXs.buttonHasLeftIcon.buttonHasText .buttonWaitingIconContainer,
.buttonSizeXs.buttonHasLeftIcon.buttonHasRightIcon .buttonWaitingIconContainer {
    margin-right: 2px;
}

/* Size S */

.buttonSizeS {
    min-width: 20px;
    min-height: 20px;
}

.buttonSizeS .buttonText {
    font-size: 10px;
    line-height: 1.1;
}

.buttonSizeS.buttonHasText,
.buttonSizeS.buttonHasLeftIcon.buttonHasRightIcon {
    padding: 0 9px;
}

.buttonSizeS.buttonIsRound {
    border-radius: 10px;
}

.buttonSizeS .buttonLeftIconContainer,
.buttonSizeS .buttonRightIconContainer {
    border-radius: 10px;
    /* background: green; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.buttonSizeS.buttonHasText .buttonLeftIconContainer {
    margin-left: -10px;
}
.buttonSizeS.buttonHasText .buttonRightIconContainer {
    margin-right: -10px;
}

/* Size M */

.buttonSizeM {
    min-width: 28px;
    min-height: 28px;
}

.buttonSizeM .buttonText {
    font-size: 11px;
    line-height: 1.1;
}

.buttonSizeM.buttonHasText,
.buttonSizeM.buttonHasLeftIcon.buttonHasRightIcon {
    padding: 0 14px;
}

.buttonSizeM.buttonIsRound {
    border-radius: 14px;
}

.buttonSizeM .buttonLeftIconContainer,
.buttonSizeM .buttonRightIconContainer {
    border-radius: 14px;
    /* background: green; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.buttonSizeM.buttonHasText .buttonLeftIconContainer {
    margin-left: -14px;
}
.buttonSizeM.buttonHasText .buttonRightIconContainer {
    margin-right: -14px;
}

/*.buttonSizeM.buttonHasRightIcon .buttonText,*/
/*.buttonSizeM.buttonHasRightIcon .buttonLeftIconContainer,*/
/*.buttonSizeM.buttonHasLeftIcon.buttonHasText .buttonWaitingIconContainer,*/
/*.buttonSizeM.buttonHasLeftIcon.buttonHasRightIcon .buttonWaitingIconContainer {*/
/*    !*margin-right: 7px;*!*/
/*    margin-left: -14px;*/
/*    border-radius: 14px;*/
/*    !* background: green; *!*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 28px;*/
/*    height: 28px;*/
/*}*/

/* Size L */

.buttonSizeL {
    min-width: 40px;
    min-height: 40px;
}

.buttonSizeL .buttonText {
    font-size: 15px;
    line-height: 1.1;
}

.buttonSizeL.buttonHasText,
.buttonSizeL.buttonHasLeftIcon.buttonHasRightIcon {
    padding: 0 20px;
}

.buttonSizeL.buttonIsRound {
    border-radius: 20px;
}

.buttonSizeL.buttonHasText .buttonLeftIconContainer,
.buttonSizeL.buttonHasRightIcon .buttonText,
.buttonSizeL.buttonHasRightIcon .buttonLeftIconContainer,
.buttonSizeL.buttonHasLeftIcon.buttonHasText .buttonWaitingIconContainer,
.buttonSizeL.buttonHasLeftIcon.buttonHasRightIcon .buttonWaitingIconContainer {
    margin-right: 10px;
}

/* Size XL */

.buttonSizeXl {
    min-width: 48px;
    min-height: 48px;
}

.buttonSizeXl .buttonText {
    font-size: 18px;
    line-height: 1.1;
}

.buttonSizeXl.buttonHasText,
.buttonSizeXl.buttonHasLeftIcon.buttonHasRightIcon {
    padding: 0 24px;
}

.buttonSizeXl.buttonIsRound {
    border-radius: 24px;
}

.buttonSizeXl.buttonHasText .buttonLeftIconContainer,
.buttonSizeXl.buttonHasRightIcon .buttonText,
.buttonSizeXl.buttonHasRightIcon .buttonLeftIconContainer,
.buttonSizeXl.buttonHasLeftIcon.buttonHasText .buttonWaitingIconContainer,
.buttonSizeXl.buttonHasLeftIcon.buttonHasRightIcon .buttonWaitingIconContainer {
    margin-right: 12px;
}

/* Intent Default */

.buttonIntentDefault {
    background: $ghost;
    border-color: $ghost;
    color: $secondary;

    .buttonLeftIconContainer svg,
    .buttonRightIconContainer svg,
    .buttonWaitingIconContainer svg {
        fill: $secondary;
    }

    &.isGhost {
        background: transparent;
        border-color: $default-ghost;
    }

    &:not(.buttonIsDisabled):not(.buttonIsActive):hover {
        background: $ghost;
        border-color: $default-ghost;
        color: $default;

        &.isGhost {
            background: transparent;
            border-color: $primary-hover;
            color: $primary-hover;

            svg {
                fill: $primary-hover;
            }
        }
    }

    &.buttonIsActive,
    //&:not(.buttonIsDisabled):not(.buttonIsActive):focus {
    &:not(.buttonIsDisabled):not(.buttonIsActive):active {
        background: $ghost;
        border-color: $primary-hover;
        color: $primary-hover;

        .buttonLeftIconContainer svg,
        .buttonRightIconContainer svg,
        .buttonWaitingIconContainer svg {
            fill: $primary-hover;
        }

        &.isGhost {
            background: transparent;
        }
    }

    &.buttonIsMinimal {
        background: transparent;
        border-color: transparent;
        color: $default;

        .buttonLeftIconContainer svg,
        .buttonRightIconContainer svg,
        .buttonWaitingIconContainer svg {
            fill: $default;
        }

        &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
        &.buttonIsActive,
        //&:not(.buttonIsDisabled):not(.buttonIsActive):focus {
        &:not(.buttonIsDisabled):not(.buttonIsActive):active {
            background: transparent;
            border-color: transparent;
            text-decoration: underline;
            color: $primary-hover;

            svg {
                fill: $primary-hover;
            }

            &.isGhost {
                background: rgba(41, 41, 41, 0.1);
                text-decoration: none;
            }
        }
    }
}

/* Intent Primary */

.buttonIntentPrimary {
    background: $primary;
    border-color: $primary;
    color: $white;

    .buttonLeftIconContainer svg,
    .buttonRightIconContainer svg,
    .buttonWaitingIconContainer svg {
        fill: $white;
    }

    &.isGhost {
        background: transparent;
        border-color: $primary;
        color: $primary;

        svg {
            fill: $primary;
        }
    }

    &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
    //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
    &.buttonIsActive,
    &:not(.buttonIsDisabled):not(.buttonIsActive):active {
        background: $primary-hover;
        border-color: $primary-hover;
        color: $white;

        &.isGhost {
            background: rgba(100, 100, 100, 0.05);
            border-color: $primary-hover;
            color: $primary-hover;

            svg {
                fill: $primary-hover;
            }
        }
    }

    &.buttonIsMinimal {
        background: transparent;
        border-color: transparent;
        color: $primary;

        .buttonLeftIconContainer svg,
        .buttonRightIconContainer svg,
        .buttonWaitingIconContainer svg {
            fill: $primary;
        }

        &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
        //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
        &.buttonIsActive,
        &:not(.buttonIsDisabled):not(.buttonIsActive):active {
            background: transparent;
            border-color: transparent;
            text-decoration: underline;
            color: $primary-hover;

            svg {
                fill: $primary-hover;
            }

            &.isGhost {
                background: rgba(41, 41, 41, 0.1);
                text-decoration: none;
            }
        }
    }
}

/* Intent Info */

.buttonIntentInfo {
    background: $info;
    border-color: $info;
    color: $info-text;

    .buttonLeftIconContainer svg,
    .buttonRightIconContainer svg,
    .buttonWaitingIconContainer svg {
        fill: $info-text;
    }

    &.isGhost {
        background: transparent;
        border-color: $info-text;
        color: $info-text;

        svg {
            fill: $info-text;
        }
    }

    &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
    //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
    &.buttonIsActive,
    &:not(.buttonIsDisabled):not(.buttonIsActive):active {
        background: $info-hover;
        border-color: $info-hover;
        color: $info-text;

        &.isGhost {
            background: rgba(100, 100, 100, 0.05);
            border-color: $info-hover;
            color:$info-hover;

            svg {
                fill: $info-hover;
            }
        }
    }

    &.buttonIsMinimal {
        background: transparent;
        border-color: transparent;
        color: $info;

        .buttonLeftIconContainer svg,
        .buttonRightIconContainer svg,
        .buttonWaitingIconContainer svg {
            fill: $info;
        }

        &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
        //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
        &.buttonIsActive,
        &:not(.buttonIsDisabled):not(.buttonIsActive):active {
            background: transparent;
            border-color: transparent;
            text-decoration: underline;
            color: $info-hover;

            svg {
                fill: $info-hover;
            }

            &.isGhost {
                background: rgba(41, 41, 41, 0.1);
                text-decoration: none;
                color: $info-hover;

                svg {
                    fill: $info-hover;
                }

            }
        }
    }
}

/*!* Intent Success *!*/

/*.buttonIntentSuccess {*/
/*    background: var(--buttonSuccessBackground);*/
/*    border-color: var(--buttonSuccessBorderColor);*/
/*    color: var(--buttonSuccessTextColor);*/
/*}*/

/*.buttonIntentSuccess .buttonLeftIcon.iconIntentSuccess,*/
/*.buttonIntentSuccess .buttonRightIcon.iconIntentSuccess,*/
/*.buttonIntentSuccess .buttonWaitingIcon.iconIntentSuccess {*/
/*    fill: var(--buttonSuccessTextColor);*/
/*}*/

/*.buttonIntentSuccess:not(.buttonIsDisabled):not(.buttonIsActive):hover {*/
/*    background: var(--buttonSuccessHoverBackground);*/
/*    border-color: var(--buttonSuccessHoverBorderColor);*/
/*    color: var(--buttonSuccessHoverTextColor);*/
/*}*/

/*.buttonIntentSuccess.buttonIsActive,*/
/*.buttonIntentSuccess:not(.buttonIsDisabled):not(.buttonIsActive):active {*/
/*    background: var(--buttonSuccessActiveBackground);*/
/*    border-color: var(--buttonSuccessActiveBorderColor);*/
/*    color: var(--buttonSuccessActiveTextColor);*/
/*}*/

/*.buttonIntentSuccess.buttonIsMinimal {*/
/*    background: var(--buttonSuccessIsMinimalBackground);*/
/*    border-color: var(--buttonSuccessIsMinimalBorderColor);*/
/*    color: var(--buttonSuccessIsMinimalTextColor);*/
/*}*/

/*.buttonIntentSuccess.buttonIsMinimal .buttonLeftIcon.iconIntentSuccess,*/
/*.buttonIntentSuccess.buttonIsMinimal .buttonRightIcon.iconIntentSuccess,*/
/*.buttonIntentSuccess.buttonIsMinimal .buttonWaitingIcon.iconIntentSuccess {*/
/*    fill: var(--buttonSuccessIsMinimalTextColor);*/
/*}*/

/*.buttonIntentSuccess.buttonIsMinimal:not(.buttonIsDisabled):not(.buttonIsActive):hover {*/
/*    background: var(--buttonSuccessIsMinimalHoverBackground);*/
/*    border-color: var(--buttonSuccessIsMinimalHoverBorderColor);*/
/*    color: var(--buttonSuccessIsMinimalHoverTextColor);*/
/*}*/

/*.buttonIntentSuccess.buttonIsMinimal.buttonIsActive,*/
/*.buttonIntentSuccess.buttonIsMinimal:not(.buttonIsDisabled):not(.buttonIsActive):active {*/
/*    background: var(--buttonSuccessIsMinimalActiveBackground);*/
/*    border-color: var(--buttonSuccessIsMinimalActiveBorderColor);*/
/*    color: var(--buttonSuccessIsMinimalActiveTextColor);*/
/*}*/

/*!* Intent Warning *!*/

/*.buttonIntentWarning {*/
/*    background: var(--buttonWarningBackground);*/
/*    border-color: var(--buttonWarningBorderColor);*/
/*    color: var(--buttonWarningTextColor);*/
/*}*/

/*.buttonIntentWarning .buttonLeftIcon.iconIntentWarning,*/
/*.buttonIntentWarning .buttonRightIcon.iconIntentWarning,*/
/*.buttonIntentWarning .buttonWaitingIcon.iconIntentWarning {*/
/*    fill: var(--buttonWarningTextColor);*/
/*}*/

/*.buttonIntentWarning:not(.buttonIsDisabled):not(.buttonIsActive):hover {*/
/*    background: var(--buttonWarningHoverBackground);*/
/*    border-color: var(--buttonWarningHoverBorderColor);*/
/*    color: var(--buttonWarningHoverTextColor);*/
/*}*/

/*.buttonIntentWarning.buttonIsActive,*/
/*.buttonIntentWarning:not(.buttonIsDisabled):not(.buttonIsActive):active {*/
/*    background: var(--buttonWarningActiveBackground);*/
/*    border-color: var(--buttonWarningActiveBorderColor);*/
/*    color: var(--buttonWarningActiveTextColor);*/
/*}*/

/*.buttonIntentWarning.buttonIsMinimal {*/
/*    background: var(--buttonWarningIsMinimalBackground);*/
/*    border-color: var(--buttonWarningIsMinimalBorderColor);*/
/*    color: var(--buttonWarningIsMinimalTextColor);*/
/*}*/

/*.buttonIntentWarning.buttonIsMinimal .buttonLeftIcon.iconIntentWarning,*/
/*.buttonIntentWarning.buttonIsMinimal .buttonRightIcon.iconIntentWarning,*/
/*.buttonIntentWarning.buttonIsMinimal .buttonWaitingIcon.iconIntentWarning {*/
/*    fill: var(--buttonWarningIsMinimalTextColor);*/
/*}*/

/*.buttonIntentWarning.buttonIsMinimal:not(.buttonIsDisabled):not(.buttonIsActive):hover {*/
/*    background: var(--buttonWarningIsMinimalHoverBackground);*/
/*    border-color: var(--buttonWarningIsMinimalHoverBorderColor);*/
/*    color: var(--buttonWarningIsMinimalHoverTextColor);*/
/*}*/

/*.buttonIntentWarning.buttonIsMinimal.buttonIsActive,*/
/*.buttonIntentWarning.buttonIsMinimal:not(.buttonIsDisabled):not(.buttonIsActive):active {*/
/*    background: var(--buttonWarningIsMinimalActiveBackground);*/
/*    border-color: var(--buttonWarningIsMinimalActiveBorderColor);*/
/*    color: var(--buttonWarningIsMinimalActiveTextColor);*/
/*}*/

/*!* Intent Danger *!*/

/* Intent Info */

.buttonIntentDanger {
    background: $danger;
    border-color: $danger;
    color: $white;

    .buttonLeftIconContainer svg,
    .buttonRightIconContainer svg,
    .buttonWaitingIconContainer svg {
        fill: $white;
    }

    &.isGhost {
        background: transparent;
        border-color: $danger-dark;
        color: $danger-dark;

        svg {
            fill: $danger-dark;
        }
    }

    &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
    //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
    &.buttonIsActive,
    &:not(.buttonIsDisabled):not(.buttonIsActive):active {
        background: $danger-dark;
        border-color: $danger-dark;
        color: $white;

        &.isGhost {
            background: rgba(100, 100, 100, 0.05);
            border-color: $danger-dark;
            color: $danger-dark;

            svg {
                fill: $danger-dark;
            }
        }
    }

    &.buttonIsMinimal {
        background: transparent;
        border-color: transparent;
        color: $danger;

        .buttonLeftIconContainer svg,
        .buttonRightIconContainer svg,
        .buttonWaitingIconContainer svg {
            fill: $danger;
        }

        &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
        //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
        &.buttonIsActive,
        &:not(.buttonIsDisabled):not(.buttonIsActive):active {
            background: transparent;
            border-color: transparent;
            text-decoration: underline;
            color: $danger;

            svg {
                fill: $danger;
            }

            &.isGhost {
                background: rgba(41, 41, 41, 0.1);
                text-decoration: none;
                color: $danger-light;

                svg {
                    fill: $danger-light;
                }

            }
        }
    }
}

/* Intent Secondary */

.buttonIntentSecondary {
    background: $secondary;
    border-color: $secondary;
    color: $white;

    .buttonLeftIconContainer svg,
    .buttonRightIconContainer svg,
    .buttonWaitingIconContainer svg {
        fill: $white;
    }

    &.isGhost {
        background: transparent;
        border-color: $secondary;
        color: $secondary;

        svg {
            fill: $secondary;
        }
    }

    &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
    &.buttonIsActive,
    //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
    &:not(.buttonIsDisabled):not(.buttonIsActive):active {
        background: $secondary-hover;
        border-color: $secondary-hover;
        color: $white;

        &.isGhost {
            background: rgba(100, 100, 100, 0.05);
            border-color: $secondary-hover;
            color: $secondary-hover;

            svg {
                fill: $secondary-hover;
            }
        }
    }

    &.buttonIsMinimal {
        background: transparent;
        border-color: transparent;
        color: $secondary;

        .buttonLeftIconContainer svg,
        .buttonRightIconContainer svg,
        .buttonWaitingIconContainer svg {
            fill: $secondary;
        }

        &:not(.buttonIsDisabled):not(.buttonIsActive):hover,
        //&:not(.buttonIsDisabled):not(.buttonIsActive):focus,
        &.buttonIsActive,
        &:not(.buttonIsDisabled):not(.buttonIsActive):active {
            background: transparent;
            border-color: transparent;
            text-decoration: underline;
            color: $secondary;

            svg {
                fill: $secondary;
            }

            &.isGhost {
                background: rgba(41, 41, 41, 0.1);
                text-decoration: none;
                color: $secondary-hover;

                svg {
                    fill: $secondary-hover;
                }

            }
        }
    }
}

.buttonIsDisabled {
    cursor: not-allowed;
    &:not(.buttonIntentPrimary) {
        opacity: 0.7;
    }
    &.buttonIntentPrimary:not(.buttonIsMinimal) {
        border-color: #999999;
        background-color: #b4b4b4;
    }
    &.buttonIntentPrimary.isGhost {
        border-color: #999999;
        color: #999999;
        background-color: transparent;
    }
    &.buttonIntentPrimary.buttonIsMinimal {
        color: #999999;

        .buttonLeftIconContainer svg {
            fill: #999;
        }
    }
}
button[disabled] {
    cursor: not-allowed;
}

.buttonIsFilled {
    display: flex;
    width: 100%;
}

.buttonLeftIconContainer,
.buttonRightIconContainer,
.buttonWaitingIconContainer {
    display: flex;
}

.buttonText {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
    text-transform: uppercase;
}