.layoutSwitch {
    display: none;
}

.has-js .layoutSwitch {
    position: sticky;
    left: 100%;
    z-index: 1;
    top: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2rem;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    list-style: none;
    box-shadow: 0 0 0 1px #d4d0e099;
}

.layoutSwitch__button {
    position: relative;
    display: block;
    height: 2rem;
    width: 2rem;
    background: transparent url(compact-alt.svg) no-repeat center;
    background-size: 1rem;
    opacity: .7;
    cursor: pointer;
}

.layoutSwitch__button:hover {
    opacity: 1;
}

.layoutSwitch__button span {
    position: absolute;
    top: .2em;
    left: -200vw;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    white-space: nowrap;
    transform: translateX(-105%);
    box-shadow: 0 0 0 1px #d4d0e099;
    background-color: #1f272b;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: opacity .2s .2s;
}

.layoutSwitch__button:hover span {
    left: 0;
    opacity: 1;
}

.layoutSwitch__button span:after {
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    right: -6px;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-left: 3px solid #1f272b;
}

.layoutSwitch:hover {
    background-color: #F6F5FA;
}

.layoutSwitch__button--expanded {
    background-image: url(expanded.svg);
}

.ApiDocumentationView--expanded .layoutSwitch__button--expanded,
.ApiDocumentationView--compact .layoutSwitch__button--compact {
    background-color: #d4d0e099;
    opacity: 1;
}

@media (max-width: 1199px) {
    .ApiDocumentationView--expanded .layoutSwitch__button--expanded,
    .ApiDocumentationView--compact .layoutSwitch__button--compact {
        display: none;
    }

    .layoutSwitch {
        transform: translateX(2.5rem);
    }
    .layoutSwitch__button {
        background-color: #fff;
        opacity:1;
    }
}

@media (min-width: 1200px) {
    .has-js .layoutSwitch {
        position: sticky;
        top: 200px;
        transform: translateX(2.5rem);
    }

    .layoutSwitch__button--compact {
        background-image: url(compact.svg);
    }

    .layoutSwitch__button--expanded {
        background-image: url(expanded.svg);
    }
}