﻿#tools.tools-right-sidebar .tools-left-column,
#tools.tools-left-sidebar .tools-right-column,
#tools.tools-no-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-block: var(--padding-0);
}

#tools.tools-left-sidebar .tools-right-column > div:first-child {
    padding-left: var(--padding-0);
}

#tools.tools-left-sidebar .tools-right-column > div:last-child {
    padding-right: var(--padding-0);
}

#tools-pager {
    grid-column: 2;
}

.sidebar-right-toggle {
    grid-column: 3;
    display: flex;
    justify-content: end;
}

#tools-pager .doc-next-prev-container-pull {
    display: flex;
    justify-content: center;
}

#tools-pager .pull-left {
    float: none;
}

#tools-pager :is(.prev, .list, .next, .doc-next-prev) {
    display: flex;
    gap: var(--padding-0);
}

#tools a,
#tools a:link,
#tools a:visited,
#tools .printed-version-container {
    color: var(--link-color);
    text-decoration: none;
}

#tools-pager :is(.prev, .next, a) {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

#tools-pager .next-text:hover,
#tools-pager .list-text:hover,
#tools-pager .prev-text:hover {
    text-decoration: underline;
}

#tools-pager .prev,
#tools-pager .list,
#tools-pager .next {
    cursor: pointer;
}

#tools-pager .prev {
    padding-right: var(--padding-0);
    border-right: 1px solid #d3d3d3;
}

#tools-pager .next {
    padding-left: var(--padding-0);
    border-left: 1px solid #d3d3d3;
}

#tools-pager .list-text {
    display: flex;
    align-items: center;
}

#tools .clearfix {
    display: none;
}

#tools-actions {
    gap: var(--padding-0);
    padding-right: var(--padding-0);
}

#tools .tool-tip-wrapper {
    position: relative;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: var(--font-size-1);
}

#tools .tool-tip-wrapper .tool-tip {
    font-size: var(--font-size-sm);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 0.5em;
    border-radius: 7px;
    right: 150%;
    top: 0;
    width: max-content;
    visibility: hidden;
}

#tools .tool-tip-wrapper .tool-tip-right {
    left: 150%;
}

#tools .tool-tip-wrapper:hover .tool-tip,
#tools .tool-tip-wrapper:focus-visible .tool-tip{
    visibility: visible;
}

#tools button {
    color: var(--link-color);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    font-size: var(--font-size-0);
    line-height: var(--font-lineheight-0);
    }

#tools .fa {
    font-size: var(--font-size-1);
}

#actions-wrapper {
    position: relative;
}

#actions-dropdown-btn {
    background-color: #f3f3f4;
    border: none;
    min-height: var(--font-size-2);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: .5rem;
    border-radius: 5px;
    cursor: pointer;
}

button#actions-dropdown-btn {
    color: var(--font-color);
}

#actions-dropdown {
    position: absolute;
    right: 0;
    z-index: 1;
    background-color: white;
    border: 1px solid #d3d3d3;
    box-shadow: rgba(37, 38, 39, 0.03) 0px -1px 2px 0px, 
        rgba(37, 38, 39, 0.04) 0px 3px 2px -2px, 
        rgba(37, 38, 39, 0.04) 0px 7px 5px -2px, 
        rgba(37, 38, 39, 0.05) 0px 12px 10px -2px, 
        rgba(37, 38, 39, 0.06) 0px 22px 18px -2px, 
        rgba(37, 38, 39, 0.07) 0px 41px 33px -2px, 
        rgba(37, 38, 39, 0.08) 0px 100px 80px -2px;
    border-radius: 5px;
}

#actions-dropdown > div {
    display: flex;
    flex-direction: column;
    width: max-content;
}

#actions-dropdown :is(a, button) {
    display: flex;
    gap: 1ch;
    cursor: pointer;
    padding: var(--padding-0) var(--padding-1);
    white-space: nowrap;
}

#actions-dropdown > div  :is(a, button):hover,
#actions-dropdown > div  :is(a, button):hover .fa {
    background-color: #337ab7;
    color: white;
    border-radius: 5px;
}

#tools .subscribe-container,
#tools .change-bar-toggle {
    border: none;
    background-color: transparent;
}

#change-bar-toggle {
    transition: padding 300ms ease-in-out;
}

#tools .copy-link-status {
    position: absolute;
    top: -3px;
    right: 50px;
    height: 30px;
    background-color: green;
    color: #fff;
    padding: 10px;
    padding-top: 5px;
    display: none;
}

#tools .copy-status-link-container {
    display: flex;
    justify-content: flex-end;
    padding-right: var(--padding-0);
    margin-left: auto;
    position: relative;
}

@media (max-width: 991px) {
    #tools-pager :is(.prev-text, .list-text, .next-text) {
        display: none;
    }
}
