@import url("../themes/auto/auto.css");

body {
    overflow: hidden;
    margin: 0;
    position: absolute;
    /* CSS is pants. Move the bar down a tiny bit to cover up the gap. */
    top: 1px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#command-line-holder {
    background: var(--tridactyl-cmdl-bg);
    color: var(--tridactyl-cmdl-fg);
    font-family: var(--tridactyl-cmdl-font-family);
    font-size: 9pt;
    /* reduce the padding added by the colon so that the command line shows up roughly where it used to be */
    padding-left: 0.125ex;
}

input {
    width: 97%;
    font-family: var(--tridactyl-cmdl-font-family);
    font-size: var(--tridactyl-cmdl-font-size);
    line-height: var(--tridactyl-cmdl-line-height);
    color: var(--tridactyl-cmdl-fg);
    background: var(--tridactyl-cmdl-bg);
    border: unset;
    /* reduce the padding from the colon */
    /* margin-left: -0.25ex; */
    /* we currently have a border from the completions */
    /* border-top: solid 1px lightgray; */
}

input:focus {
    outline: none;
}

#tridactyl-colon::before {
    content: ":";
}

/* COMPLETIONS */

#completions {
    --option-height: var(--tridactyl-cmplt-option-height);
    color: var(--tridactyl-cmplt-fg);
    background: var(--tridactyl-cmplt-bg);
    display: inline-block;
    font-size: var(--tridactyl-cmplt-font-size);
    font-family: var(--tridactyl-cmplt-font-family);
    overflow: hidden;
    width: 100%;
    border-top: var(--tridactyl-cmplt-border-top);
}

/* Olie doesn't know how CSS inheritance works */
#completions > div {
    max-height: calc(20 * var(--option-height));
    min-height: calc(10 * var(--option-height));
}

#completions > div > table {
    width: 100%;
    font-size: 9pt;
    border-spacing: 0;
    table-layout: fixed;
}

#completions table tr td.prefix {
    width: 3.2em;
    padding-left: 0.5em;
    text-align: center;
}
#completions table tr td.container,
#completions table tr td.icon,
#completions table tr td.privatewindow {
    width: 1.5em;
}
#completions table tr td.tabcount {
    width: 6em;
}
#completions table tr td.tgroup {
    width: 10em;
    padding-left: 0.5em;
    text-align: right;
}
#completions table tr td.tgroup:empty {
    display: none;
}
/* #completions table tr td:nth-of-type(3) { width: 5em; } */
#completions table tr td.content {
    width: 50%;
}

/* Accroding to src/completions/TabHistory.ts formatTimeSpan,
 * max-width should be 14 characters (14ex), 20ex for more tolorance. */
#completions table tr td.time {
    width: 20ex;
    text-align: right;
    padding-right: 2ex;
}

#completions table tr {
    white-space: nowrap;
    overflow: hidden;
}

#completions table tr td {
    overflow: hidden;
}

#completions img {
    display: inline;
    vertical-align: middle;
    height: 1em;
    width: 1em;
}

#completions .sectionHeader {
    background: linear-gradient(
        var(--tridactyl-header-first-bg),
        var(--tridactyl-header-second-bg),
        var(--tridactyl-header-third-bg)
    );
    font-size: var(--tridactyl-header-font-size);
    font-weight: var(--tridactyl-header-font-weight);
    border-bottom: var(--tridactyl-header-border-bottom);
    padding-left: 0.5ex;
}

#completions .sectionHeader,
#completions .option {
    height: var(--option-height);
    line-height: var(--option-height);
}

.url {
    text-decoration: var(--tridactyl-url-text-decoration);
}

.option:not(.focused) .url {
    color: var(--tridactyl-url-fg);
    background: var(--tridactyl-url-bg);
}

a.url:hover {
    cursor: var(--tridactyl-url-cursor);
    text-decoration: underline;
}

/* Hide the URLs if the screen is small */
@media all and (max-width: 500px) {
    .url {
        display: none;
    }
}

.FindCompletionOption .match {
    font-weight: bold;
}

.hidden {
    display: none;
}

/* Pick the .url out especially because otherwise its link styles dominate. */
.focused,
.focused .url {
    color: var(--tridactyl-of-fg);
    background: var(--tridactyl-of-bg);
}

.option.incognito .privatewindow {
    background-image: var(--tridactyl-private-window-icon-url);
}

/* Still completions, but container-related stuff */
.option .container {
    mask-size: 1em;
    mask-repeat: no-repeat;
    mask-position: center;
}
.option .privatewindow {
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: center;
}
.option.container_blue .container {
    background-color: var(--tridactyl-container-color-blue);
}
.option.container_turquoise .container {
    background-color: var(--tridactyl-container-color-turquoise);
}
.option.container_green .container {
    background-color: var(--tridactyl-container-color-green);
}
.option.container_yellow .container {
    background-color: var(--tridactyl-container-color-yellow);
}
.option.container_orange .container {
    background-color: var(--tridactyl-container-color-orange);
}
.option.container_red .container {
    background-color: var(--tridactyl-container-color-red);
}
.option.container_pink .container {
    background-color: var(--tridactyl-container-color-pink);
}
.option.container_purple .container {
    background-color: var(--tridactyl-container-color-purple);
}
.option.container_fingerprint .container {
    mask-image: var(--tridactyl-container-fingerprint-url);
}
.option.container_briefcase .container {
    mask-image: var(--tridactyl-container-briefcase-url);
}
.option.container_dollar .container {
    mask-image: var(--tridactyl-container-dollar-url);
}
.option.container_cart .container {
    mask-image: var(--tridactyl-container-cart-url);
}
.option.container_circle .container {
    mask-image: var(--tridactyl-container-circle-url);
}
.option.container_gift .container {
    mask-image: var(--tridactyl-container-gift-url);
}
.option.container_vacation .container {
    mask-image: var(--tridactyl-container-vacation-url);
}
.option.container_food .container {
    mask-image: var(--tridactyl-container-food-url);
}
.option.container_fruit .container {
    mask-image: var(--tridactyl-container-fruit-url);
}
.option.container_pet .container {
    mask-image: var(--tridactyl-container-pet-url);
}
.option.container_tree .container {
    mask-image: var(--tridactyl-container-tree-url);
}
.option.container_chill .container {
    mask-image: var(--tridactyl-container-chill-url);
}

.ExcmdCompletionOption td.excmd {
    padding-left: 0.5em;
    width: 20%;
}

.ExcmdCompletionOption td.documentation {
    width: 100%;
}

.SettingsCompletionOption td.title {
    padding-left: 0.5em;
}

#completions .SettingsCompletionOption td.title,
#completions .SettingsCompletionOption td.content,
#completions .SettingsCompletionOption td.type {
    width: 15%;
    text-overflow: ellipsis;
}

#completions .TabGroupCompletionOption td.title {
    width: 15%;
}

#completions .TabGroupCompletionOption td.content {
    width: auto;
}

.HelpCompletionOption td.name {
    width: 25%;
}

#completions .SessionCompletionOption td.type {
    width: 1ch !important;
    padding: 0px 3pt;
}

#completions .SessionCompletionOption td.time {
    width: 5ch !important;
    padding: 0px 3pt;
    text-align: right;
}

#completions .WindowCompletionOption td.id {
    width: 6ch !important;
    text-align: right;
    padding: 0px 8pt;
}