.bubble-sub-button-container {
    position: relative;
    display: flex;
    justify-content: end;
    right: 8px;
    align-content: center;
    gap: 8px;
    align-items: center;
}

.bubble-sub-button {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    position: relative;
    right: 0;
    box-sizing: border-box;
    width: min-content;
    min-width: 36px;
    height: 36px;
    vertical-align: middle;
    font-size: 12px;
    border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 32px));
    padding: 0 8px;
    white-space: nowrap;
    transition: all 0.5s ease-in-out;
    color: var(--primary-text-color);
}

.bubble-sub-button-name-container {
    display: flex;
}

.show-icon {
    display: flex;
    --mdc-icon-size: 16px;
}

.bright-background {
    color: var(--bubble-sub-button-dark-text-color, rgb(0, 0, 0));
}

.background-on {
    background-color: var(--bubble-sub-button-light-background-color, var(--bubble-accent-color, var(--bubble-default-color)));
}

.background-off {
    background-color: var(--bubble-sub-button-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));
}

.icon-with-state {
    margin-right: 4px;
    --mdc-icon-size: 16px;
}

.icon-without-state {
    margin-right: 0;
    --mdc-icon-size: 20px;
}

.no-icon-select-arrow {
    width: 24px !important;
    height: 24px !important;
    --mdc-icon-size: 24px;
}

.no-icon-select-container {
    width: 16px !important;
}

.bubble-sub-button .bubble-dropdown-arrow {
    background: none !important;
}

.bubble-sub-button.is-select.background-on {
    background: var(--bubble-select-arrow-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))))) !important;
}

.sub-buttons-grid .bubble-sub-button-container {
    display: grid;
    row-gap: calc( ( ( var(--row-height,56px) - 36px ) * var(--row-size,1) + var(--row-gap, 8px) * ( var(--row-size,1) - 1 ) ) / ( var(--row-size,1) + 1 ));
    grid-template-rows: repeat(var(--row-size,1), 1fr);
    grid-template-columns: repeat(1, 1fr);
    grid-auto-flow: column;
}

.sub-buttons-grid .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
    grid-row: 1 / calc(var(--row-size,1) + 1);
}

.rows-2 .bubble-sub-button-container {
    flex-direction: column;
    gap: 4px !important;
    row-gap: calc( ( ( var(--row-height,56px) - 40px ) * var(--row-size,1) + var(--row-gap, 8px) * ( var(--row-size,1) - 1 ) ) / ( 2*var(--row-size,1) + 2 ));
    column-gap: 4px !important;
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(calc(2*var(--row-size,1)), minmax(auto, max-content));
    grid-auto-flow: column;
    width: auto;
}

.rows-2 .bubble-sub-button {
    height: 20px !important;
}

.large.rows-2 .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
    grid-row: 1 / calc(2*var(--row-size,1) + 1);
}