@button_color: @primary_color;
@button_color_hover: color-mix(in srgb, var(--button_color), var(--darken_mixin_color) 8%);
@button_color_focus: color-mix(in srgb, var(--button_color), var(--darken_mixin_color) 8%);

@button_color_alt: @secondary_color;
@button_color_alt_hover: color-mix(in srgb, var(--button_color_alt), var(--darken_mixin_color) 8%);
@button_color_alt_focus: color-mix(in srgb, var(--button_color_alt), var(--darken_mixin_color) 8%);

@button_top_bottom_padding: 11.36px;
@button_side_padding: 27px;


@button_border_radius: @border_radius;

:root {

    --button_color: @button_color;
    --button_color_hover: @button_color_hover;
    --button_color_focus: @button_color_focus;

    --button_color_alt: @button_color_alt;
    --button_color_alt_hover: @button_color_alt_hover;
    --button_color_alt_focus: @button_color_alt_focus;

    --button_top_bottom_padding: @button_top_bottom_padding;
    --button_side_padding: @button_side_padding;
}

/*
 * Button Styling
 */

.button {
    position: relative;
    display: inline-block;
    background: var(--button_color);
    margin: 0 0 16px;
    padding: var(--button_top_bottom_padding) var(--button_side_padding);
    cursor: pointer;
    text-align: center;
    outline: none;
    font-family: var(--primary_font);
    color: #fff;
    .rems(18);
	font-weight: 700;
	line-height: 25.278px;
    text-decoration: none;
    z-index: 1;
    overflow: hidden;

	border-radius: 24px;


	border: 1px solid var(--button_color);
	background: var(--button_color);

	transition: color 200ms linear, background 200ms linear, border-color 200ms linear;


	&:hover, &:focus-visible, &:active {
        color: #fff;
		background: color-mix(in srgb, var(--button_color), var(--darken_mixin_color) 8%);
		border-color: color-mix(in srgb, var(--button_color), var(--darken_mixin_color) 8%);
		transition: color 200ms linear, background 200ms linear, border-color 200ms linear;

		&:after {
			opacity: 1;
			transition: opacity 200ms linear;
		}
    }

	&.withArrow {
		&:after {
			content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.1 38.1L198.3 57.9c-4.7 4.7-4.7 12.3 0 17L353.4 230H12c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h341.4l-155.1 155.1c-4.7 4.7-4.7 12.3 0 17l19.8 19.8c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17L235.1 38.1c-4.7-4.7-12.3-4.7-17 0z" fill="%23fff"/></svg>');
			display: inline-block;
			width: 18px;
			height: 20px;
			position: relative;
			top: 3px;
			margin-left: 16px;
		}
	}


	&.buttonLarge {
		.rems(20);
		font-weight: 600;
		padding: 26px;

		&:after {
			width: 18px;
			height: 20px;
		}
	}

    i {
        margin: 0 0 0 11px;
        width: auto;
        height: auto;
        display: inline-block;
        text-align: center;

        &:before {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
    }

    &.iconLeft {

        i {
            margin: 0 11px 0 0;
        }

    }



    &[disabled] {
        pointer-events: none;
        opacity: 0.4;
    }


}



/*
* Button Alt
*/
.buttonAlt {
    .button();
    color: #fff;
	border-color: var(--button_color_alt);
	background: var(--button_color_alt);
	transition: color 200ms linear, background 200ms linear, border-color 200ms linear;

    &:hover, &:focus-visible, &:active  {

		border-color: color-mix(in srgb, var(--button_color_alt), var(--darken_mixin_color) 8%);
        color: #fff;
		background: color-mix(in srgb, var(--button_color_alt), var(--darken_mixin_color) 8%);
		transition: color 200ms linear, background 200ms linear, border-color 200ms linear;
    }


    &[disabled] {
		pointer-events: none;
		opacity: 0.4;
    }

}

/*
* Outlined
*/
.buttonOutlined {
	.button();
	color: var(--button_color);
	border-color: var(--button_color);
	background: transparent;
	transition: background 200ms linear, color 200ms linear, border-color 200ms linear;

	&:hover, &:focus-visible, &:active  {
		color: #fff;
		border-color: var(--button_color);
		background: var(--button_color);
		transition: background 200ms linear, color 200ms linear, border-color 200ms linear;
	}


	&[disabled] {
		pointer-events: none;
		opacity: 0.4;
	}

}

.buttonWhite {
	.button();
	color: var(--button_color);
	border-color: #fff;
	background: #fff;
	transition: background 200ms linear, color 200ms linear, border-color 200ms linear;

	&:hover, &:focus-visible, &:active  {

		border-color: #fff;
		color: #fff;
		background: #fff;
		transition: background 200ms linear, color 200ms linear, border-color 200ms linear;
	}


	&[disabled] {
		pointer-events: none;
		opacity: 0.4;
	}

}


.buttonOptionSelected {
	color: #fff;
	border-color: var(--alert_color);
	background: var(--alert_color);


	&:hover {
		color: #fff;
		background:  color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 8%);
		border-color:  color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 8%);
	}

	&:focus-visible {
		color: #fff;
		background:  color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 8%);
		border-color:  color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 8%);
	}

	&:active {
		color: #fff;
		background:  color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 4%);
		border-color:  color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 4%);
	}


	&[disabled] {
		color: #fff !important;
		background: var(--alert_color) !important;
		border-color: var(--alert_color) !important;
	}
}

/*
* Button alert
 */
.buttonAlert {
    .button();
    color: #fff;
    background: var(--alert_color);
    border-color: var(--alert_color);

    &:hover, &:focus-visible, &:active {
        color: #fff;
        background: color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 10%);
        border-color: color-mix(in srgb, var(--alert_color), var(--darken_mixin_color) 10%);
    }


    &[disabled] {

        color: #fff !important;
        background: var(--alert_color) !important;
        border-color: var(--alert_color) !important;


    }

}

/*
 * Button Groups
 */

.buttonGroup {

    float: none;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    align-items: flex-start;

    &:before, &:after {
        display: none;
    }

    a {
        margin-right: 16px;
        height: auto;
        flex: 0 0 auto;

        &:last-of-type {
            margin-right: 0;
        }
    }

}

.buttonMini {
    .rems(10);
    padding: 1em;

}

.toggleButtonWrap {
    text-decoration: none;
}

.toggleButton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    text-decoration: none;
    font-weight: 400;
    .rems(14);
    line-height: 14px;
    border-radius: 50%;
    overflow: hidden;
    text-shadow: none;

    &:before, &:after {
        content: "";
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        .rems(14);
        line-height: 14px;
    }

    &:before {
        position: relative;
        z-index: 2;
        text-decoration: none;
        color: var(--primary_color);
        transition: all 200ms linear;
        text-shadow: none;

        .darkBg & {
            color: #fff;
        }
    }

    &:after {
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background: var(--secondary_color);
        opacity: 0;
        width: 0;
        height: 0;
        transition: all 200ms linear;
    }

    .open & {
        &:before {
            color: var(--primary_color);

            .darkBg & {
                color: #fff;
            }
        }
    }

    &:hover, &:active {
        &:after {
            width: 100%;
            height: 100%;
            opacity: 0.24;
            transition: all 200ms linear;
        }
    }

    &:active {
        &:after {
            opacity: 0.64;
        }
    }

    &.toggleAlt {

        &:before {
            color: var(--secondary_color);

            .darkBg & {
                color: var(--secondary_color);
            }
        }
    }

    &.toggleBordered {

        border: 1px solid rgba(23, 39, 65, 0.4);

        .darkBg & {
            border-color: #fff;
        }

    }
}


.buttonIcon {
	.button();

	background: transparent;
	margin: 0;
	border-color: transparent;
	color: var(--text_color);
	padding: 14px 0;
	text-align: left;
	width: auto;
	max-width: none;

	&:hover, &:active, &:focus {
		background: transparent;
		border-color: transparent;
		color: var(--highlight_color);
	}

	.svgIcon {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-left: 4px;
		color: var(--highlight_color);
		position: relative;
		top: 1px;

		svg {
			width: 100%;
			height: 100%;
		}
	}
}
