@use "variables" as *;
@import "mixins";

#large {
    height: $field-height-lg;
    border-radius: $border-radius-lg;
    font-size: $font-size-lmd;

    .p-button-label {
        font-size: inherit;
    }

    .p-button-icon,
    .pi {
        font-size: $icon-lg;
    }
}

#small {
    border-radius: $border-radius-sm;
    font-size: $font-size-sm;
    gap: $spacing-0;
    height: $field-height-sm;
    padding: 0 $spacing-1;

    .p-button-label {
        font-size: inherit;
    }
}

#main-primary-severity {
    background-color: $color-palette-primary;

    &:hover {
        background-color: $color-palette-primary-600;
    }

    &:active {
        background-color: $color-palette-primary-700;
    }

    &:focus {
        background-color: $color-palette-primary;
        @include field-focus;
    }
}

#main-secondary-severity {
    background-color: $color-palette-secondary;

    &:hover {
        background-color: $color-palette-secondary-600;
    }

    &:active {
        background-color: $color-palette-secondary-700;
    }

    &:focus {
        background-color: $color-palette-secondary;
        @include field-focus;
    }
}

#main-tertiary-severity {
    background-color: $color-palette-primary-200;

    &:hover {
        background-color: $color-palette-primary-300;
    }

    &:active {
        background-color: $color-palette-primary-400;
    }

    &:focus {
        background-color: $color-palette-primary-200;
        @include field-focus;
    }
}

#outlined-primary-severity {
    background-color: transparent;
    border: $field-border-size solid $color-palette-primary;
    white-space: nowrap;

    .p-button-label,
    .p-button-icon,
    .pi {
        color: $color-palette-primary;
    }

    &:hover {
        background-color: $color-palette-primary-op-10;
    }

    &:active {
        background-color: $color-palette-primary-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
    }
}

#outlined-primary-severity-sm {
    border: 1px solid $color-palette-primary;
}

#outlined-secondary-severity {
    background-color: transparent;
    border: $field-border-size solid $color-palette-secondary;

    .p-button-label,
    .p-button-icon,
    .pi {
        color: $color-palette-secondary;
    }

    &:hover {
        background-color: $color-palette-secondary-op-10;
    }

    &:active {
        background-color: $color-palette-secondary-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
    }
}

#outlined-secondary-severity-sm {
    border: 1px solid $color-palette-secondary;
}

// outlined only apply to icon-only
#outlined-tertiary-severity.p-button-icon-only {
    border: $field-border-size solid $color-palette-primary-300;
    white-space: nowrap;

    .p-button-label,
    .p-button-icon,
    .pi {
        color: $color-palette-primary;
    }

    &:hover {
        background-color: $color-palette-primary-100;
    }

    &:active {
        background-color: $color-palette-primary-200;
    }

    &:focus {
        background-color: $white;
        @include field-focus;
    }
}

#outlined-tertiary-severity-sm {
    border: 1px solid $color-palette-primary-300;
}

#text-primary-severity {
    background-color: transparent;
    color: $black;
    overflow: hidden;
    max-width: 100%;

    .p-button-label {
        color: $color-palette-primary;
        @include truncate-text;
    }

    .p-button-icon,
    .pi {
        color: $color-palette-primary;
    }

    &:hover {
        background-color: $color-palette-primary-op-10;
    }

    &:active {
        background-color: $color-palette-primary-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
    }
}

#text-secondary-severity {
    background-color: transparent;
    color: $black;

    &.p-button-semi-transparent {
        background-color: rgba(255, 255, 255, 0.65);
    }

    .p-button-label {
        color: $color-palette-secondary;
    }

    .p-button-icon,
    .pi {
        color: $color-palette-secondary;
    }

    &.p-button-icon-only {
        .p-button-icon,
        .pi {
            color: $black;
        }
    }

    &:hover {
        background-color: $color-palette-secondary-op-10;
    }

    &:active {
        background-color: $color-palette-secondary-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
    }
}

// Apply for icon only and button
#text-tertiary-severity {
    background-color: $white;
    color: $color-palette-primary-500;
    overflow: hidden;
    max-width: 100%;

    .p-button-label {
        color: $color-palette-primary-500;
        @include truncate-text;
    }

    .p-button-icon,
    .pi {
        color: $color-palette-primary-500;
    }

    &.p-button-icon-only {
        .p-button-icon,
        .pi {
            color: $color-palette-gray-800;
        }
    }

    &:hover {
        background-color: $white;
    }

    &:active {
        background-color: $white;
    }

    &:focus {
        background-color: $color-palette-primary-200;

        @include field-focus;
    }
}

#text-danger-severity {
    background-color: transparent;
    color: $color-accessible-text-red;

    &:hover {
        background-color: $color-palette-red-op-10;
    }

    &:active {
        background-color: $color-palette-red-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
    }

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

// Success button styles
#main-success-severity {
    background-color: $color-palette-green;
    color: $white;

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

    &:hover {
        background-color: $color-palette-green-shade;
    }

    &:active {
        background-color: $color-palette-green-shade;
    }

    &:focus {
        background-color: $color-palette-green;
        @include field-focus;
        outline-color: $color-palette-green-op-20;
    }
}

#outlined-success-severity {
    background-color: transparent;
    border: $field-border-size solid $color-palette-green;
    white-space: nowrap;

    .p-button-label,
    .p-button-icon,
    .pi {
        color: $color-palette-green;
    }

    &:hover {
        background-color: $color-palette-green-op-10;
    }

    &:active {
        background-color: $color-palette-green-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
        outline-color: $color-palette-green-op-20;
    }
}

#outlined-success-severity-sm {
    border: 1px solid $color-palette-green;
}

#text-success-severity {
    background-color: transparent;
    color: $black;

    .p-button-label {
        color: $color-palette-green;
    }

    .p-button-icon,
    .pi {
        color: $color-palette-green;
    }

    &:hover {
        background-color: $color-palette-green-op-10;
    }

    &:active {
        background-color: $color-palette-green-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
        outline-color: $color-palette-green-op-20;
    }
}

#text-warning-severity {
    background-color: transparent;
    color: $black;

    .p-button-label {
        color: $color-palette-yellow;
    }

    .p-button-icon,
    .pi {
        color: $color-palette-yellow;
    }

    &:hover {
        background-color: $color-palette-yellow-op-10;
    }

    &:active {
        background-color: $color-palette-yellow-op-20;
    }

    &:focus {
        background-color: transparent;
        @include field-focus;
        outline-color: $color-palette-yellow-op-20;
    }
}

#button-disabled {
    background-color: $color-palette-gray-200;
    color: $color-palette-gray-500;

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

    svg,
    path {
        fill: $color-palette-gray-500;
    }
}

#button-disabled-outlined {
    border: $field-border-size solid $color-palette-gray-300;
    background-color: $color-palette-gray-200;

    &.p-button-icon-only {
        .p-button-icon,
        .pi {
            color: $color-palette-gray-500;
        }
    }
}

#button-disabled-text {
    border: none;
    background-color: transparent;
}
