@import "dxHelpers/reset";

:host {
    display: block;

    --dx-c-icon-badge-background-color: var(--dx-g-indigo-vibrant-50);
    --dx-c-icon-badge-box-shadow: none;
    --dx-c-icon-badge-color: white;
    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-lg);
    --dx-c-icon-badge-icon-transform: none;
    --dx-c-icon-badge-size: var(--dx-g-spacing-3xl);
    --dx-c-icon-badge-transition: none;
}

.icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--dx-c-icon-badge-size);
    width: var(--dx-c-icon-badge-size);
    flex-shrink: 0;
    background-color: var(--dx-c-icon-badge-background-color);
    box-shadow: var(--dx-c-icon-badge-box-shadow);
    transition: var(--dx-c-icon-badge-transition);
}

dx-icon {
    --dx-c-icon-size: var(--dx-c-icon-badge-icon-size);
    --dx-c-icon-color: var(--dx-c-icon-badge-color);

    transform: var(--dx-c-icon-badge-icon-transform);
}

.shape-circle {
    border-radius: 50%;
}

.shape-square {
    border-radius: var(--dx-g-spacing-sm);
}

.background-small {
    --dx-c-icon-badge-size: var(--dx-g-spacing-lg);
}

.background-medium {
    --dx-c-icon-badge-size: var(--dx-g-spacing-xl);
}

.background-large {
    --dx-c-icon-badge-size: var(--dx-g-spacing-3xl);
}