.bc-split-button {
position: relative;
z-index: 1;
width: fit-content;
--hover-background: hsla(230, 13%, 9%, 0.075);
--transition-duration: 0.3s; 
--transition-easing: ease; 
}
.bc-split-button__btn, .bc-split-button__list-item{
all: unset;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bc-split-button__morph-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 6px; 
pointer-events: none;
transform-origin: left top;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: hsl(0, 0%, 100%); 
box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09); 
transition: 
box-shadow var(--transition-duration), 
transform var(--transition-duration) var(--transition-easing), 
background var(--transition-duration) var(--transition-easing), 
height var(--transition-duration) var(--transition-easing), 
width var(--transition-duration) var(--transition-easing);
will-change: transform, height, width;
}
[bc-split-button--expanded] .bc-split-button__btn {
opacity: 0;
pointer-events: none;
}
[bc-split-button--expanded] .bc-split-button__list-wrapper {
opacity: 1;
pointer-events: auto;
}
[bc-split-button--expanded] .bc-split-button__list {
transform: scale(1);
}
.bc-split-button__btn {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px; 
white-space: nowrap; 
text-decoration: none;
border-radius: 6px; 
padding: 8px 16px; 
font-weight: 500; 
line-height: 1.2;
color: hsl(230, 13%, 9%);
cursor: pointer;
transition: var(--transition-duration);
--translate-y: 2px;
}
.bc-split-button__btn:focus-visible {
outline: none;
}
.bc-split-button__btn:focus-visible ~ .bc-split-button__morph-bg {
box-shadow: 0 0 0 1px hsla(230, 13%, 9%, 0.05), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
0 3.5px 6px hsla(230, 13%, 9%, 0.09), 0 0 0 2px hsl(0, 0%, 100%), 0 0 0 4px hsl(230, 7%, 23%);
}
.bc-split-button__btn:active {
transform: translateY(var(--translate-y)); 
}
.bc-split-button__btn-icon {
--dimensions: 12px;
height: var(--dimensions);
width: var(--dimensions);
min-width: unset !important;
min-height: unset !important;
}
.bc-split-button__list-wrapper {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-duration);
}
.bc-split-button__list {
transform: scale(0.5);
transition: var(--transition-duration) var(--transition-easing);
}
.bc-split-button__list-item {
display: flex;
width: 100%;
white-space: nowrap; 
font-size: 16px; 
color: hsl(230, 13%, 9%);
line-height: 1;
font-weight: 500;
margin: 4px; 
padding: 8px 12px; 
border-radius: 3px; 
cursor: pointer;
transition: background var(--transition-duration);
}
.bc-split-button__list-item:hover,
.bc-split-button__list-item:focus-visible {
background-color: var(--hover-background); 
}