@layer themes {
    .main-button__success {
        background-color: var(--ids_color_action_secondary_base_empty);
        border-color:  var(--color_greenOlive_50);
        padding: 0 var(--ids_size_general_18x);
    }

    .main-button__success:hover {
        background-color: var(--ids_color_action_secondary_base_empty);
        border-color:  var(--color_greenOlive_50);
    }
    @layer componentes {
        .main-button {
            border: solid var(--ids_size_border_small);
            border-radius: var(--ids_size_cornerRadius_button);
            padding: 0 var(--ids_size_general_24x);
            height: var(--ids_size_general_48x);
            cursor: pointer;
            display: flex;
            gap: var(--ids_spacing_2x);
            align-items: center;
            justify-content: center;
        }

        .main-button__primary {
            background-color: var(--ids_color_action_primary_base);
            border-color: var(--ids_color_action_primary_variant);
        }

        .hug-content {
            display: flex;

            /*width: 139px;*/
            /*height: 48px;*/

            border-radius: 8px;

            flex: none;
            order: 0;
            flex-grow: 0;
        }

        .fill-container {
            display: flex;

            /*width: 288px;*/
            /*height: 48px;*/

            flex: none;
            order: 0;
            flex-grow: 1;
        }

        .main-button__primary {
            background-color: var(--ids_color_action_primary_base);
            border-color: var(--ids_color_action_primary_variant);
        }

        .main-button__primary:hover {
            background-color: var(--ids_color_action_primary_variant);
        }

        .main-button__primary-disabled {
            background-color: var(--ids_color_action_disabled_base);
            border-color: var(--ids_color_action_disabled_base);
        }

        .main-button__secondary {
            background-color: var(--ids_color_action_secondary_base_empty);
            border-color: var(--ids_color_action_secondary_base);
        }

        .main-button__secondary:hover {
            background-color: var(--ids_color_action_secondary_base_soft);
            border-color: var(--ids_color_action_secondary_variant);
        }

        .main-button__secondary-disabled {
            background-color: var(--ids_color_action_secondary_base_empty);
            border-color: var(--ids_color_action_disabled_base);
        }

        .main-button__primary-onDark {
            background-color: var(--ids_color_contrast_onDark);
            border-color: var(--ids_color_contrast_onDark);
        }

        .main-button__primary-onDark:hover {
            background-color: var(--ids_color_contrast_onDark_strong);
            border-color: var(--ids_color_contrast_onDark);
        }

        .main-button__primary-onDark-disabled {
            background-color: var(--ids_color_contrast_onDark_strong);
            border-color: var(--ids_color_contrast_onDark);
        }

        .main-button__secondary-onDark {
            background-color: var(--ids_color_contrast_onLight_empty);
            border-color: var(--ids_color_contrast_onDark);
        }

        .main-button__secondary-onDark:hover {
            background-color: var(--ids_color_contrast_onDark_soft);
            border-color: var(--ids_color_contrast_onDark);
        }

        .main-button__secondary-onDark-disabled {
            background-color: var(--ids_color_contrast_onDark_empty);
            border-color: var(--ids_color_contrast_onDark_medium);
        }

        .main-button__secondary-onLight {
            background-color: var(--ids_color_contrast_onLight_empty);
            border-color: var(--ids_color_contrast_onLight);
        }

        .main-button__secondary-onLight:hover {
            background-color: var(--ids_color_contrast_onLight_soft);
            border-color: var(--ids_color_contrast_onLight);
        }

        .main-button__secondary-onLight-disabled {
            background-color: var(--ids_color_contrast_onLight_empty);
            border-color: var(--ids_color_contrast_onLight_medium);
        }
    }
}