/** Bookwyrm Tabs
 ******************************************************************************/

.bw-tabs {
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
    position: relative;
    align-items: center;
    display: flex;
    font-size: 1rem;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    user-select: none;
    white-space: nowrap;
}

.bw-tabs::before {
    border-bottom-color: $border;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    bottom: 0;
    content: "";
    position: absolute;
    width: 100%;
}

.bw-tabs:not(:last-child) {
    margin-bottom: 1.5rem;
}

.bw-tabs a {
    align-items: center;
    border-bottom-color: $border;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: $text;
    display: flex;
    justify-content: center;
    margin-bottom: -1px;
    padding: 0.5em 1em;
    position: relative;
}

.bw-tabs a:hover {
    border-bottom-color: transparent;
    color: $text;
}

.bw-tabs a.is-active {
    border-bottom-color: transparent;
    color: $link;
}

.bw-tabs.is-left {
    padding-right: 0.75em;
}

.bw-tabs.is-center {
    flex: none;
    justify-content: center;
    padding-left: 0.75em;
    padding-right: 0.75em;
}

.bw-tabs.is-right {
    justify-content: flex-end;
    padding-left: 0.75em;
}

.bw-tabs .icon:first-child {
    margin-right: 0.5em;
}

.bw-tabs .icon:last-child {
    margin-left: 0.5em;
}

.bw-tabs.is-centered {
    justify-content: center;
}

.bw-tabs.is-boxed a {
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.bw-tabs.is-boxed a:hover {
    background-color: $background-secondary;
    border-bottom-color: $border-hover;
}

.bw-tabs.is-boxed a.is-active {
    background-color: $background-body;
    border-color: $border;
    border-bottom-color: $border !important;
}

.bw-tabs.is-fullwidth a {
    flex-grow: 1;
    flex-shrink: 0;
}

.bw-tabs.is-toggle a {
    border-color: $border;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 0;
    position: relative;
}

.bw-tabs.is-toggle a:hover {
    background-color: $background-secondary;
    border-color: $border;
    z-index: 2;
}

.bw-tabs.is-toggle a + a {
    margin-left: -1px;
}

.bw-tabs.is-toggle a:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.bw-tabs.is-toggle a:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.bw-tabs.is-toggle a.is-active {
    background-color: $link-background;
    border-color: $link;
    color: $text;
    z-index: 1;
}

.bw-tabs.is-toggle {
    border-bottom: none;
}

.bw-tabs.is-toggle.is-toggle-rounded a:first-child {
    border-bottom-left-radius: 290486px;
    border-top-left-radius: 290486px;
    padding-left: 1.25em;
}

.bw-tabs.is-toggle.is-toggle-rounded a:last-child {
    border-bottom-right-radius: 290486px;
    border-top-right-radius: 290486px;
    padding-right: 1.25em;
}

.bw-tabs.is-small {
    font-size: 0.75rem;
}

.bw-tabs.is-medium {
    font-size: 1.25rem;
}

.bw-tabs.is-large {
    font-size: 1.5rem;
}

.bw-tabs.has-aside-text a {
    margin-top: 1.5rem;
}

.bw-tabs a .aside-text {
    position: absolute;
    top: calc(-0.75rem - 0.75rem);
    left: 0;
    color: $text;
}
