@import "../_colors";

body .ui-fieldset {
    border: none;
    padding: 0;
    margin-bottom: 10px;

    a {
        color: $primary-color;
        text-decoration: none;
    }
}

body .ui-fieldset:not(.ui-fieldset-toggleable) .ui-fieldset-legend {
    background-color: $default-secondary-color;
    border: 1px solid $default-secondary-color;
}

body .ui-fieldset .ui-fieldset-legend,
body .ui-fieldset-toggleable .ui-fieldset-legend > a {
    border-radius: 0;
    color: $primary-dark-text-color;
    font-weight: bold;
    min-height: 34px;
    transition: background-color 200ms ease-out;
    white-space: unset;
    width: 100%;
}

body .ui-fieldset .ui-fieldset-legend > a > p-header > span.sds-badge-error,
body .ui-fieldset .ui-fieldset-legend > p-header > span.sds-badge-error {
    margin-right: 10px;
}

body .ui-fieldset-toggleable .ui-fieldset-legend > a {
    background-color: $default-color;
    border: 1px solid $default-secondary-color;

    &:hover {
        background-color: highlight($default-primary-color);
    }

    &[aria-expanded="true"] {
        background-color: $default-secondary-color;
    }

    &[aria-expanded="true"]:hover {
        background-color: $default-primary-color;
    }
}

body .ui-fieldset .ui-fieldset-legend .ui-fieldset-toggler {
    display: inline-block;
    color: $primary-dark-text-color;
    margin-right: 10px;
}

body .ui-fieldset .ui-fieldset-legend:hover .ui-fieldset-toggler {
    color: $primary-dark-text-color;
}

body .ui-fieldset .ui-fieldset-content {
    padding: 10px;
    border-color: $default-secondary-color;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}