@import "dxHelpers/reset";

:host {
    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-40);
    --dx-c-button-custom-background: transparent;
    --dx-c-button-custom-border: 1px solid transparent;
    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-40);
    --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
    --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
    --dx-c-slot-empty-width: max-content;
}

.avatar-control {
    height: var(--dx-g-spacing-xl);
    width: calc(var(--dx-g-spacing-lg) + 4px);
}

.avatar-small-container {
    align-items: center;
    display: flex;
    padding: 2px 0;
}

.avatar {
    border-radius: 100%;
    border: 2px solid #0d9dda;
}

.avatar.avatar-small {
    display: block;
    height: calc(var(--dx-g-spacing-lg) + 4px);
    width: calc(var(--dx-g-spacing-lg) + 4px);
}