@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

$-border-width: func.units(1);

%-button-variant {
    font-weight: func.font-weight('semibold');
    font-size: func.font-size('sm');
    min-height: func.units(7);
    padding: calc(func.units(3) - $-border-width) calc(func.units(4) - $-border-width); // top and bottom | left and right
    border-width: $-border-width;
    border-style: solid;
    border-radius: func.border-radius('medium');
}

.button {
    color: inherit;
    background-color: func.color('transparent');

    // Default properties for all buttons
    @include mixins.appearance-none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    overflow-wrap: break-word;
    max-width: 100%;

    // Properties overwritten by variant properties
    font-weight: inherit;
    font-size: inherit;
    min-height: auto;
    padding: 0;
    border: 0;

    // Default classes and states for all buttons
    &:hover, &.button-hover, &:active, &.button-active {
        text-decoration: underline;
    }

    &:disabled,
    &.disabled {
        opacity: vars.$button-disabled-opacity;
        cursor: vars.$button-disabled-cursor;
        box-shadow: none !important;
        text-decoration: none;
    }

    &.xs-full-width {
        width: 100%;

        @include mixins.media-breakpoint-up(sm) {
            width: auto;
        }
    }

    span {
        overflow-wrap: break-word;
        max-width: 100%;
    }

    // Primary button
    &.button-primary {
        @extend %-button-variant;
    
        border-color: func.color(vars.$button-primary-default-border-color);
        color: func.color(vars.$button-primary-default-color);
        background-color: func.color(vars.$button-primary-default-background-color);
    
        &:hover,
        &.button-hover {
            border-color: func.color(vars.$button-primary-hover-border-color);
            color: func.color(vars.$button-primary-hover-color);
            background-color: func.color(vars.$button-primary-hover-background-color);
        }

        &:active,
        &.button-active {
            border-color: func.color(vars.$button-primary-active-border-color);
            color: func.color(vars.$button-primary-active-color);
            background-color: func.color(vars.$button-primary-active-background-color);
        }
    
        &:disabled,
        &.disabled {
            text-decoration: none;
            border-color: func.color(vars.$button-primary-default-border-color);
            color: func.color(vars.$button-primary-default-color);
            background-color: func.color(vars.$button-primary-default-background-color);
        }
    }

    // Secondary button
    &.button-secondary {
        @extend %-button-variant;
    
        border-color: func.color(vars.$button-secondary-default-border-color);
        color: func.color(vars.$button-secondary-default-color);
        background-color: func.color(vars.$button-secondary-default-background-color);
    
        &:hover,
        &.button-hover {
            border-color: func.color(vars.$button-secondary-hover-border-color);
            color: func.color(vars.$button-secondary-hover-color);
            background-color: func.color(vars.$button-secondary-hover-background-color);
        }

        &:active,
        &.button-active {
            border-color: func.color(vars.$button-secondary-active-border-color);
            color: func.color(vars.$button-secondary-active-color);
            background-color: func.color(vars.$button-secondary-active-background-color);
        }
    
        &:disabled,
        &.disabled {
            text-decoration: none;
            border-color: func.color(vars.$button-secondary-default-border-color);
            color: func.color(vars.$button-secondary-default-color);
            background-color: func.color(vars.$button-secondary-default-background-color);
        }
    }

    // Tertiary button
    &.button-tertiary {
        @extend %-button-variant;
        
        border-color: func.color(vars.$button-tertiary-default-border-color);
        color: func.color(vars.$button-tertiary-default-color);
        background-color: func.color(vars.$button-tertiary-default-background-color);
    
        &:hover,
        &.button-hover {
            border-color: func.color(vars.$button-tertiary-hover-border-color);
            color: func.color(vars.$button-tertiary-hover-color);
            background-color: func.color(vars.$button-tertiary-hover-background-color);
        }

        &:active,
        &.button-active {
            border-color: func.color(vars.$button-tertiary-active-border-color);
            color: func.color(vars.$button-tertiary-active-color);
            background-color: func.color(vars.$button-tertiary-active-background-color);
        }
    
        &:disabled,
        &.disabled {
            text-decoration: underline;
            border-color: func.color(vars.$button-tertiary-default-border-color);
            color: func.color(vars.$button-tertiary-default-color);
            background-color: func.color(vars.$button-tertiary-default-background-color);
        }
    }

    // Warning button
    &.button-warning {
        @extend %-button-variant;
    
        border-color: func.color(vars.$button-warning-default-border-color);
        color: func.color(vars.$button-warning-default-color);
        background-color: func.color(vars.$button-warning-default-background-color);
    
        &:hover,
        &.button-hover {
            border-color: func.color(vars.$button-warning-hover-border-color);
            color: func.color(vars.$button-warning-hover-color);
            background-color: func.color(vars.$button-warning-hover-background-color);
        }

        &:active,
        &.button-active {
            border-color: func.color(vars.$button-warning-active-border-color);
            color: func.color(vars.$button-warning-active-color);
            background-color: func.color(vars.$button-warning-active-background-color);
        }
    
        &:disabled,
        &.disabled {
            text-decoration: none;
            border-color: func.color(vars.$button-warning-default-border-color);
            color: func.color(vars.$button-warning-default-color);
            background-color: func.color(vars.$button-warning-default-background-color);
        }
    }

    // Button with icon and no text
    &.button-icon-only {
        font-size: func.font-size('sm');
        min-height: func.units(6);
        padding: func.units(1);
        border-width: $-border-width;
        border-style: solid;
        border-radius: func.border-radius('small');
        text-decoration: none;

        border-color: func.color(vars.$button-icon-default-border-color);
        color: func.color(vars.$button-icon-default-color);
        background-color: func.color(vars.$button-icon-default-background-color);

        .icon-svg {
            margin: 0;
        }

        &:hover,
        &.button-hover {
            border-color: func.color(vars.$button-icon-hover-border-color);
            color: func.color(vars.$button-icon-hover-color);
            background-color: func.color(vars.$button-icon-hover-background-color);
        }

        &:active,
        &.button-active {
            border-color: func.color(vars.$button-icon-active-border-color);
            color: func.color(vars.$button-icon-active-color);
            background-color: func.color(vars.$button-icon-active-background-color);
        }
    
        &:disabled,
        &.disabled {
            text-decoration: none;
            border-color: func.color(vars.$button-icon-default-border-color);
            color: func.color(vars.$button-icon-default-color);
            background-color: func.color(vars.$button-icon-default-background-color);
        }
    }

    // Styling for icons in buttons
    .icon-svg {
        margin-right: func.units(3);
        fill: currentColor;
        min-width: func.units(5, 'rem');
    }

    span + .icon-svg,
    .icon-svg + span {
        max-width: calc(100% - func.units(3) - func.units(5, 'rem'));
    }
}

.button-group {
    margin-top: -(func.units(3));
    margin-bottom: -(func.units(3));
    display: flex;
    flex-wrap: wrap;

    .button, .button-wrapper {
        margin-right: func.units(4);
        margin-top: func.units(3);
        margin-bottom: func.units(3);

        &:last-child {
            margin-right: 0;
        }
    }
}