@charset "UTF-8";

/*!

    Browser on Browser

    Copyright (C) 2024 よね/Yone
    Licensed under the MIT License.

    https://github.com/yone1130/browser-on-browser

*/

:root {
    --font-family: "M PLUS 1", "Local Noto Sans JP", "Noto Sans JP", Arial, sans-serif;
    --font-size: 16px;
    --font-weight: 400;
    --navigation-height: 7rem;

    font-size: var(--font-size);
    font-weight: var(--font-weight);
}

body {
    display: flex;

    margin: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;

    padding: 0;
    scrollbar-width: thin !important;
    scrollbar-color: #888 #f1f1f1 !important;
    flex-direction: column;

    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    color: #f0f0f0ff;

    user-select: none;

    & * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    &::-webkit-scrollbar {
        width: 12px !important;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
        border: 2px solid #f1f1f1;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

.navigation {
    height: var(--navigation-height);
    background-color: #282828ff;
}

.tabs-bar {
    display: flex;
    align-items: center;
    height: 33.3%;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    gap: 0.4rem;
}

.search-tabs-button {
    height: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 0.5em;
    box-shadow: 0 0 2px 2px #00000020;
    background-color: #404040ff;
    transition: background-color 0.3s;

    &:hover {
        background-color: #204080ff;
    }
}

.tabs {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    gap: 0.5rem;
}

.tabs__ul {
    display: flex;
    align-items: flex-end;
    list-style: none;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tabs__li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 12rem;
    height: calc(100% - 0.4rem);
    padding-bottom: 0.4rem;
    overflow: hidden;
}

.tabs__li.current {
    background-color: hsl(0, 0%, 25%);
    border-radius: 0.5em 0.5em 0 0;
    overflow: visible;

    &::before {
        position: absolute;
        display: block;
        bottom: 0;
        left: -0.8rem;
        width: 0.8rem;
        height: 0.8rem;
        background-color: #404040ff;
        content: "";

        background-color: transparent;
        border-bottom-right-radius: 0.8rem;
        box-shadow: 0.4rem 0.4rem 0 0.4rem hsl(0, 0%, 25%);
    }

    &::after {
        position: absolute;
        display: block;
        bottom: 0;
        right: -0.8rem;
        width: 0.8rem;
        height: 0.8rem;
        background-color: #404040ff;
        content: "";

        background-color: transparent;
        border-bottom-left-radius: 0.8rem;
        box-shadow: -0.4rem 0.4rem 0 0.4rem hsl(0, 0%, 25%);
    }
}

.tabs__hover {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    overflow: hidden;
    transition: background-color 0.3s;

    &:hover:not(.tabs__li.current > .tabs__hover) {
        background-color: #204080ff;
    }
}

.tabs__left {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 0.5rem;
}

.tabs__title {
    display: inline;
    white-space: nowrap;
    overflow: visible;
    width: 0;
    text-overflow: ellipsis;
}

.tabs__img {
    height: 70%;
    aspect-ratio: 1 / 1;
}

.tabs__close {
    height: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 100vw;
    background-color: #0000;

    &:hover {
        background-color: #fff4;
    }
}

.new-tab-button__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.new-tab-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 100vw;
    transition: background-color 0.3s;

    &:hover {
        background-color: #204080ff;
    }
}

.control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 33.3%;
    border-radius: 0.4em 0.4em 0 0;
    gap: 0.7rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: #404040ff;

    @media (width < 769px) {
        gap: 0.4rem;
    }
}

.action {
    display: flex;
    gap: 0.2rem;

    @media (width < 769px) {
        display: none;
    }
}

.control__button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(80% - 0.6em);
    aspect-ratio: 1 / 1;
    border-radius: 100vw;
    padding: 0.3em;
    transition: background-color 0.3s;

    &:hover {
        background-color: #707070ff;
    }
}

.control__button-img {
    height: 80%;
    aspect-ratio: 1 / 1;
}

.address-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
    border-radius: 100vw;
    gap: 0.5rem;
    padding-left: 0.2rem;
    padding-right: 1rem;
    background-color: #202020ff;
}

.address-bar-status {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    aspect-ratio: 1 / 1;
    border-radius: 100vw;
    background-color: #404040ff;
}

.address-bar-status__img {
    height: 70%;
    width: 70%;
}

.address-bar-input {
    border: none;
    width: 100%;
    height: 90%;
    background-color: #00000000;
    font-size: 1rem;
    color: #ffffffff;

    &:focus-visible {
        outline: unset;
        border: unset;
    }

    &::selection {
        background-color: #6060a0ff;
    }
}

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.menu-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(80% - 0.6em);
    aspect-ratio: 1 / 1;
    border-radius: 100vw;
    padding: 0.3em;
    transition: background-color 0.3s;

    &:hover {
        background-color: #707070ff;
    }
}

.user-button {
    @media (width < 769px) {
        display: none;
    }
}

.menu-button__img {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    height: 80%;
    transition: background-color 0.3s;
}

.bookmark-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 33.3%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: #404040ff;
}

.bookmark-bar__ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}

.bookmark-bar__li {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    border-radius: 100vw;
    padding: 0 0.7em;
    gap: 0.5em;
    font-size: 0.8rem;
    transition: background-color 0.3s;

    &:hover {
        background-color: #707070ff;
    }
}

.bookmark-bar__icon {
    height: 70%;
}

.bookmark-bar__title {
    @media (width < 769px) {
        display: none;
    }
}

.all-bookmarks {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    border-radius: 100vw;
    padding: 0 0.5em;
    transition: background-color 0.3s;

    &:hover {
        background-color: #707070ff;
    }
}

.view {
    width: 100%;
    height: calc(100%);
    padding: 0.5rem;
    background-color: #404040ff;
}

.view__iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.3rem;
    background-color: #282828ff;
    overflow: scroll;
    display: none;
}

.view__iframe.active {
    display: block;
}