.bb-buttons-group {
	
	@media (width < 1024px) {
		display: flex;
		flex-direction: row-reverse;
		gap: 6px;
	}

	&:has(input:checked) {

		label {
			background-color: #424967;
			color: #fff;
			border-color: #fff;
		}

		ul {

			@media (width <= 1024px) {
				position: absolute;
				top: 0;
				left: 0;
				height: auto;
				max-height: 178px;
				right: 106px;
				z-index: 2;
			}
		}
	}

	label {
		border: #424967 1px solid;
		width: 100px;
		height: 44px;
		display: grid;
		place-items: center;
		border-radius: 10px;
		margin: 0;
		cursor: pointer;

		input {
			display: none;
		}

		@media (width >= 1024px) {
			display: none;
		}
	}

    ul {
        list-style: none;
        padding: 0;
        display: flex;
        margin: 0;
		flex-direction: column;
		
		@media (width < 1024px) {
			border-radius: 10px;
			border: 1px solid #424967;
			overflow: hidden;
			height: 44px;
			flex-grow: 1;
		}


		@media (width >= 1024px) {
			flex-direction: row;
			justify-content: center;
			column-gap: 40px;
		}

		li {
			display: flex;
		}

		[aria-current="page"] {
			@media (width < 1024px) {
				order: -1;
			}

			a {
				border-color: #424967;
                color: #424967;
                background-color: #fff;
			}
		}

        a {
			width: 100%;
			text-align: center;
            font-family: 'Liebling';
            background-color: #424967;
            color: #fff;
            display: inline-block;
            font-size: 18px;
            line-height: 18px;
            padding: 13px 36px;
            text-transform: uppercase;
            text-decoration: none;
            font-weight: 700;
			white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

			@media (width >= 1024px) {
				border: 1px solid #fff;
				border-radius: 10px;
			}

            &:hover {
                border-color: #424967;
                color: #424967;
                background-color: #fff;
            }
        }
    }
}