.fixed-bar {
    left: -9999px;
    position: fixed;
    -webkit-transition: left 0.3s ease;
    transition: left 0.3s ease;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 99999;
    width: 100%;
    padding: 15px 0;
    background-color: #E4ECFF
}

.fixed-bar-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr
}

.fixed-bar-list>:first-child {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}

.fixed-bar-list>:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2
}

.fixed-bar-list>:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}

.fixed-bar-list>:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4
}

.fixed-bar-list__content {
    padding: 0 20px
}

.fixed-bar-list__button {
    width: 100%;
    padding: 5px;
    border-radius: 10px;
    background-color: #0286FF;
    color: white;
    -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
    transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
    transition: transform 0.3s ease, background-color 0.3s ease;
    transition: transform 0.3s ease, background-color 0.3s ease, -webkit-transform 0.3s ease
}

.fixed-bar-list__button:focus,
.fixed-bar-list__button:hover .fixed-bar-list__button:active {
    background-color: green;
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

@media (max-width:610px) {
    .fixed-bar-list {
        -ms-grid-columns: 1fr 10px 1fr;
        grid-template-columns: repeat(2, 1fr);
        -ms-grid-rows: 1fr 10px 1fr;
        grid-template-rows: repeat(2, 1fr);
        gap: 10px 10px
    }

    .fixed-bar-list>:first-child {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .fixed-bar-list>:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3
    }

    .fixed-bar-list>:nth-child(3) {
        -ms-grid-row: 3;
        -ms-grid-column: 1
    }

    .fixed-bar-list>:nth-child(4) {
        -ms-grid-row: 3;
        -ms-grid-column: 3
    }
}

.is-open.fixed-bar_top {
    top: 0;
    left: 50%
}

.is-open.fixed-bar_bottom {
    bottom: 0;
    left: 50%
}