.cdp-button {
    all: unset;
    font: normal 600 14px/20px "Noto Sans";
    color: var(--Base-Shades-White, #fff);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    flex-wrap: wrap;

    box-sizing: border-box;
    &:not([data-shape]), &[data-shape="roundtangle"] {
        border-radius: var(--radius-md, 8px);
    }
    &[data-shape="pill"] {
        border-radius: var(--radius-full, 999px);
    }
    &[data-shape="rectangle"] {
        border-radius: var(--radius-none, 0);
    }
    &:not([data-size]), &[data-size="sm"] {
        padding: 8px 10px;
    }
    &[data-size="md"] {
        padding: 10px 14px;
    }
    &[data-size="lg"] {
        padding: 10px 16px;
    }
    &[data-size="xl"] {
        padding: 12px 18px;
    }
    &[data-size="xxxl"] {
        padding: 18px 34px;
    }
    &:not([data-hierarchy]), &[data-hierarchy="primary"] {
        &:not([data-color]), &[data-color="neutral"] {
            background-color: var(--Neutral-600, #656565);
            &:hover, &:active {
                background-color: var(--Neutral-800, #464646);
            }
            &:focus {
                outline: 2px solid var(--Neutral-200, #dcdcdc);
            }
            &:disabled {
                background-color: var(--Neutral-100, #EFEFEF);
                color: var(--Neutral-300, #BDBDBD);
            }
        }
        &[data-color="blue"] {
            background-color: var(--RDX-Blue-600, #2665af);
            &:hover, &:active {
                background-color: var(--RDX-Blue-800, #1d426f);
            }
            &:focus {
                outline: 2px solid var(--RDX-Blue-200, #c6d9f1);
            }
            &:disabled {
                background-color: var(--RDX-Blue-100, #e5edf9);
                color: var(--RDX-Blue-300, #93bae6);
            }
        }
        &[data-color="orange"] {
            background-color: var(--RDX-Orange-600, #e45312);
            &:hover, &:active {
                background-color: var(--RDX-Orange-800, #963216);
            }
            &:focus {
                outline: 2px solid var(--RDX-Orange-200, #fcd4ac);
            }
            &:disabled {
                background-color: var(--RDX-Orange-100, #feecd6);
                color: var(--RDX-Orange-300, #f9b678);
            }
        }
        &[data-color="green"] {
            background-color: var(--RDX-Green-600, #43812f);
            &:hover, &:active {
                background-color: var(--RDX-Green-800, #2e5024);
            }
            &:focus {
                outline: 2px solid var(--RDX-Green-200, #c2e4b2);
            }
            &:disabled {
                background-color: var(--RDX-Green-100, #dff1d6);
                color: var(--RDX-Green-300, #9bd185);
            }
        }
        &[data-color="violet"] {
            background-color: var(--RDX-Violet-600, #904bae);
            &:hover, &:active {
                background-color: var(--RDX-Violet-800, #643276);
            }
            &:focus {
                outline: 2px solid var(--RDX-Violet-200, #eadaf4);
            }
            &:disabled {
                background-color: var(--RDX-Violet-100, #f4edfa);
                color: var(--RDX-Violet-300, #dbbceb);
            }
        }
    }
    &[data-hierarchy="secondary"] {
        background-color: var(--Base-Shades-White, #fff);
        &:disabled {
            border: 1px solid var(--Neutral-200, #bdbdbd);
            color: var(--Neutral-400, #BDBDBD);
        }
        &:not([data-color]), &[data-color="neutral"] {
            color: var(--Neutral-700, #525252);
            border: 1px solid var(--Neutral-300, #bdbdbd);
            &:hover, &:active {
                background-color: var(--Neutral-50, #fafafa);
            }
            &:focus {
                border: 2px solid var(--Neutral-200, #bdbdbd);
            }
        }
        &[data-color="blue"] {
            color: var(--RDX-Blue-700, #1e4c86);
            border: 1px solid var(--RDX-Blue-300, #93bae6);
            &:hover, &:active {
                background-color: var(--RDX-Blue-50, #f3f6fc);
            }
            &:focus {
                border: 2px solid var(--RDX-Blue-200, #c6d9f1);
            }
        }
        &[data-color="orange"] {
            color: var(--RDX-Orange-700, #bd3d11);
            border: 1px solid var(--RDX-Orange-300, #f9b678);
            &:hover, &:active {
                background-color: var(--RDX-Orange-50, #fff6ed);
            }
            &:focus {
                border: 2px solid var(--RDX-Orange-200, #fcd4ac);
            }
        }
        &[data-color="green"] {
            color: var(--RDX-Green-700, #366328);
            border: 1px solid var(--RDX-Green-300, #9bd185);
            &:hover, &:active {
                background-color: var(--RDX-Green-50, #f1f9ec);
            }
            &:focus {
                border: 2px solid var(--RDX-Green-200, #c2e4b2);
            }
        }
        &[data-color="violet"] {
            color: var(--RDX-Violet-700, #7f3f98);
            border: 1px solid var(--RDX-Violet-300, #dbbceb);
            &:hover, &:active {
                background-color: var(--RDX-Violet-50, #fbf6fd);
            }
            &:focus {
                border: 2px solid var(--RDX-Violet-200, #eadaf4);
            }
        }
    }
    &[data-hierarchy="tertiary"] {
        font: normal 400 14px/20px "Noto Sans";
        &:focus {
            font-weight: 600;
        }
        &:disabled {
            font-weight: 600;
            color: var(--Neutral-400, #989898);
        }
        &:not([data-color]), &[data-color="neutral"] {
            color: var(--Neutral-700, #525252);
        }
        &[data-color="blue"] {
            color: var(--RDX-Blue-700, #525252);
        }
        &[data-color="orange"] {
            color: var(--RDX-Orange-700, #bd3d11);
        }
        &[data-color="green"] {
            color: var(--RDX-Green-700, #366328);
        }
        &[data-color="violet"] {
            color: var(--RDX-Violet-700, #7f3f98);
        }
    }
}