@use "sass:math";
@use "variables" as *;
@import "mixins";
@import "common";

// Shared all buttons
.p-button {
    border: none;
    color: $white;
    border-radius: $border-radius-md; // Required for all buttons

    .p-button-label {
        color: inherit;
        font-size: inherit;
        text-transform: capitalize;
    }

    .p-button-icon,
    .pi {
        color: inherit;
    }

    // Shared but not icon only
    &:not(.p-button-icon-only) {
        font-size: $font-size-md;
        gap: $spacing-1;
        height: $field-height-md;
        padding: 0 $spacing-3;
        text-transform: capitalize;

        &.p-button-lg,
        .p-button-lg & {
            @extend #large;
        }

        &.p-button-sm,
        .p-button-sm & {
            @extend #small;
        }
    }

    .p-icon-wrapper {
        display: flex;
        width: 20px;
        height: 20px;
        align-items: center;
        justify-content: center;
    }
}

// Severity for basic button
.p-button:not(:disabled),
    // Used for file upload button
.p-button.p-fileupload-choose {
    @extend #main-primary-severity;

    // Button Links
    &.p-button-link {
        color: $color-palette-primary;
        background: transparent;
        border: transparent;
    }

    &.p-button-link.p-button-secondary {
        @extend #outlined-secondary-severity;
        border: transparent;
    }

    &.p-button-tertiary {
        color: $color-palette-primary;
        @extend #main-tertiary-severity;
    }

    &.p-button-success {
        @extend #main-success-severity;
    }
}

// Severity for outlined button
.p-button.p-button-outlined:not(:disabled),
.p-button.p-button-outlined:not(.p-splitbutton-defaultbutton, .p-splitbutton-menubutton) {
    @extend #outlined-primary-severity;

    &.p-button-sm {
        @extend #outlined-primary-severity-sm;
    }

    &.p-button-secondary {
        @extend #outlined-secondary-severity;

        &.p-button-sm {
            @extend #outlined-secondary-severity-sm;
        }
    }

    &.p-button-tertiary {
        @extend #outlined-tertiary-severity;

        &.p-button-sm {
            @extend #outlined-tertiary-severity-sm;
        }
    }

    &.p-button-success {
        @extend #outlined-success-severity;

        &.p-button-sm {
            @extend #outlined-success-severity-sm;
        }
    }
}

// Severity for text button
.p-button-text:not(:disabled):not(.p-splitbutton-defaultbutton, .p-splitbutton-menubutton),
a.p-button.p-button-text {
    @extend #text-primary-severity;

    &.p-button-secondary {
        @extend #text-secondary-severity;
    }

    &.p-button-tertiary {
        @extend #text-tertiary-severity;
    }

    &.p-button-danger {
        @extend #text-danger-severity;
    }

    &.p-button-success {
        @extend #text-success-severity;
    }

    &.p-button-warning {
        @extend #text-warning-severity;
    }
}

// Shared disabled styles
.p-button:disabled:not(.p-splitbutton-defaultbutton, .p-splitbutton-menubutton),
.p-button.p-button-secondary:disabled:not(.p-splitbutton-defaultbutton, .p-splitbutton-menubutton),
.p-button.p-button-tertiary:disabled:not(.p-splitbutton-defaultbutton, .p-splitbutton-menubutton) {
    // Default
    @extend #button-disabled;

    &.p-button-outlined {
        @extend #button-disabled-outlined;
    }

    &.p-button-text {
        @extend #button-disabled-text;
    }
}

// Disabled button child element styles
.p-button:disabled.p-button-outlined:not(
        .p-splitbutton-defaultbutton,
        .p-splitbutton-menubutton
    ).p-button-secondary {
    .pi,
    .p-button-label {
        color: inherit;
    }
}

// Icon Only Sizes
.p-button-icon-only:not(.p-splitbutton-menubutton) {
    height: $field-height-md;
    width: $field-height-md;
    min-width: $field-height-md;
    border: none;

    &.p-button-sm {
        height: $field-height-sm;
        width: $field-height-sm;
        min-width: $field-height-sm;
    }
}

// Misc
.p-button.p-button-vertical {
    height: 100%;
    gap: $spacing-0;
    margin-bottom: 0;
    padding: $spacing-1;
}

.p-button-rounded {
    border-radius: 50%;
}

.p-buttonset {
    .p-button {
        margin: 0;

        &:not(:last-child) {
            border-right: 0 none;
        }

        &:not(:first-of-type):not(:last-of-type) {
            border-radius: 0;
        }

        &:first-of-type {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-of-type {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:focus {
            position: relative;
            z-index: 1;
        }
    }
}
