.text-radio-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;

    .trb-options {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .trb-option {
        background-color: #2a2a2a; // dark mode default
        color: #fff;
        padding: 4px 8px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: #3a3a3a;
        }

        &.selected {
            background-color: $col-accent; // purple highlight
            color: #fff;
        }
    }
}

.safi-reset {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;

    &:hover {
        color: #fff;
    }
}

.mandatory-checkbox-group {
    gap: 8px;

    .mcg-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background-color: #2a2a2a;
        color: #eee;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 15px;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: #3a3a3a;
        }

        &.selected {
            background-color: #7a3fff; // purple
            color: #fff;
        }

        &:focus-visible {
            outline: 3px solid #7a3fff;
            outline-offset: 2px;
        }
    }

    .mcg-icon {
        display: flex;
        width: 20px;
        height: 20px;

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

    .mcg-label {
        flex: 1;
    }
}