@font-face {
    font-family: 'Euclic Circular A Bold Italic';
    src: url(font/euclid_circular_a_bold_italic.ttf);
}

@font-face {
    font-family: 'Euclic Circular A Regular';
    src: url(font/euclid_circular_a_regular.ttf);
}

@font-face {
    font-family: 'Iosevka';
    src: url(font/iosevka.ttf);
}

html, body, .ui {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    position: relative;
}

$bg: #191616;

.ui {
    background: $bg;

    > .pane {
        width: 100%;
        height: 100%;
    }

    > .settings {
        width: 100%;
        height: 100%;
    }
}

.ui > .pane > .lhs {
    min-width: 200px;
}

.ui > .pane > .rhs {
    min-width: 0;
}

/* Begin Pane */

.pane {
    display: flex;
    flex-direction: row;
}

.pane > .resizer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pane > .resizer > .handle {
    background: #362E2E;
    height: 30px;
    align-self: stretch;
    cursor: col-resize;
}

.pane > .resizer > .line {
    flex: 1;
    width: 1px;
    background: #362E2E;

    $gap: 4px;
    &:nth-child(1) {
        margin-bottom: $gap;
    }
    &:nth-child(3) {
        margin-top: $gap;
    }
}

.pane > .rhs {
    flex: 1 1 0%;
}

.pane > .lhs > *, .pane > .rhs > * {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* End Pane */

/* Begin Button */

$fg: #FBFBFB;

$btn-border: 1px;

.button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 54px;
    flex-shrink: 0;

    background: none;
    border: $btn-border solid $fg;
    color: $fg;

    > img {
        width: 22px;
        height: auto;
        margin-right: 2px;
    }

    font-family: 'Euclic Circular A Bold Italic';
    font-size: 18px;

    margin: 0;
    padding: 0 20px;

    cursor: pointer;
    user-select: none;
}

.button:hover {
    background: $fg;
    color: $bg;
    > img {
        filter: invert(1);
    }
}

@keyframes led-pulse {
    $pulse-on: #04FF78;
    $pulse-off: darken($pulse-on, 15%);

    0% {
      background-color: $pulse-on;
    }
    50% {
        background-color: $pulse-off;
    }
    100% {
      background-color: $pulse-on;
    }
  }

.button {
    position: relative;

    .led {
        position: absolute;
        top: -$btn-border;
        left: -$btn-border;
        bottom: -$btn-border;
        width: 10px;
        z-index: 10;

        background: darken($fg, 50%);

        &.lit {
            animation: led-pulse 1s infinite;
        }
    }
}

@mixin colored-button($bg, $fg) {
    background-color: $bg;
    color: $fg;
    border-color: $fg;
    &:hover {
        background: darken($bg, 10%);
        color: darken($fg, 10%);
        border-color: darken($fg, 10%);
    }
    border-width: 2px;
}

.button.green {
    @include colored-button(#04FF78, #088B45);
}

.button.red {
    @include colored-button(#FF044F, #8B082F);
}

.button.blue {
    @include colored-button(#04B4FF, #08638B);
}

.button.cyan {
    @include colored-button(#04E1FF, #087B8B);
}

/* End Button */

/* Begin Sidebar */

.sidebar {
    display: flex;
    flex-direction: column;
}

.sidebar > .button {
    align-self: stretch;
    margin: 8px;
}

/* End Sidebar */

/* Begin Repo */

.repo {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.repo .content {
    display: flex;
    flex-direction: column;

    margin-left: 8px;

    overflow-x: hidden;
    overflow-y: auto;

    padding-bottom: 48px;
}

.repo input {
    margin: 8px;
    // Because Settings button already adds a gap
    margin-top: 0px;

    padding: 4px 8px;

    height: 22px;
    flex-shrink: 0;

    background: none;
    border: 1px solid $fg;
    color: $fg;

    font-family: 'Euclic Circular A';
    font-size: 14px;

    &:focus {
        outline: none;
    }
}

.repo .service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-bottom: 12px;
    &:last-child {
        margin-bottom: 0;
    }

    > .name {
        font-family: 'Euclic Circular A Regular';
        color: $fg;
        font-size: 16px;

        margin-bottom: 6px;
    }
}

.repo .method {
    display: flex;
    flex-direction: row;

    height: 40px;

    > .uplink {
        margin-left: 14px;

        width: 20px;
        height: 40px;
    }

    > .name {
        align-self: center;

        cursor: pointer;

        border: 1px solid $fg;
        box-sizing: border-box;
        padding: 6px;
        
        font-family: 'Euclic Circular A Regular';
        color: $fg;
        font-size: 18px;

        &:hover {
            background: $fg;
            color: $bg;
        }
    }
}

/* End Repo */

/* Begin Scrollbar */

::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

::-webkit-scrollbar-track {
    background: none;
}

$thumb-color: #413838;

::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: lighten($thumb-color, 5%);
}

::-webkit-scrollbar-thumb:active {
    background: lighten($thumb-color, 10%);
}

::-webkit-scrollbar-corner {
    background: none;
}

/* End Scrollbar */


.main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Begin Tabs */

.main .tabs {
    height: 54px;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    
    border: 1px solid #736363;
    border-left: none;
    border-right: none;

    padding: 4px;
    margin-top: 8px;

    overflow: auto;
}

// Supposed to be applied to .tabs, but doesn't work that way... because of some reasons
.main > ::-webkit-scrollbar-thumb {
    border: 2px solid $bg;
    border-top: none;
}

// Supposed to be applied to .tabs, but doesn't work that way... because of some reasons
.main > ::-webkit-scrollbar {
    height: 6px;
}

.main .tab {
    border: 1px solid $fg;

    cursor: pointer;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    margin-right: 4px;
    &:last-child {
        margin-right: 0;
    }
}

.main .tab .name {
    font-family: 'Euclic Circular A Regular';
    color: $fg;
    font-size: 18px;

    &:hover {
        color: $bg;
    }
}

.main .tab .close {
    > img {
        width: 18px;
        height: auto;
    }

    &:hover > img {
        filter: invert(1);
    }
}

.main .tab .name, .main .tab .close {
    padding: 0 6px;
    display: flex;
    align-items: center;

    &:hover {
        background: $fg;
    }
}

.main .tab.active {
    .name {
        color: $bg;
        background: $fg;
    }
}

/* End Tabs */

/* Begin Tab Content */

.tab-content {
    flex: 1;
    padding: 8px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-height: 0;
}

.tab-content > .header {
    margin-bottom: 10px;
}

.tab-content > .pane {
    flex: 1;
    min-height: 0;
}

.tab-content > .header {
    display: flex;
    flex-direction: row;
    > * {
        margin-right: 4px;
        &:last-child {
            margin-right: 0;
        }
    }
}

.tab-content .header .select {
    appearance: none;
    background: none;
    
    font-family: "Euclic Circular A Bold Italic";
    color: $fg;
    font-size: 16px;
    
    padding: 0 18px;
    
    outline: none;
    border-radius: 0;
    border: 1px solid $fg;

    margin-top: 0;
    margin-bottom: 0;
}

.tab-content .pane {
    .lhs, .rhs {
        min-width: 100px;
    }
}

.tab-content .main-pane-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    > * {
        margin-bottom: 6px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

$main-pane-col-gap: 4px;

.tab-content {
    .lhs .main-pane-col {
        padding-right: $main-pane-col-gap;
    }
    .rhs .main-pane-col {
        padding-left: $main-pane-col-gap;
    }
}

.tab-content .editor-wrapper, .tab-content .metadata-editor {
    flex: 1;
}

.tab-content .editor-wrapper {
    min-height: 0;

    // Hide editor when metadata is shown
    &.hidden {
        display: none;
    }

    border: 1px solid #5f5b5b;
}

.tab-content .editor {
    width: 100%;
    height: 100%;
}

.bottom-line {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    overflow: hidden;

    > * {
        margin-right: 4px;
        &:last-child {
            margin-right: 0;
        }
    }
}

.bottom-line {
    .metadata-button {
        flex: 1;
    }
    .follow {
        flex: 2;
    }
    .counter {
        flex-basis: 70px;
    }
    .prev, .next {
        flex: 1;
    }
}

.bottom-line .counter {
    display: grid;
    grid-template-rows: 46% auto 46%;
    grid-template-columns: 46% auto 46%;
}

.bottom-line .counter .current, .bottom-line .counter .of {
    color: $fg;
    font-family: 'Euclic Circular A Bold Italic';
    font-size: 20px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-line .counter .line {
    color: $fg;
    grid-column: 1 / 4;
    grid-row: 1 / 4;

    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-line .counter {
    .current {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
    .of {
        grid-column: 2 / 4;
        grid-row: 2 / 4;
    }
}

/* End Tab Content */

/* End Metadata Editor */

.metadata-editor {
    overflow-x: hidden;
    overflow-y: scroll;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding-right: 4px;

    > * {
        margin-bottom: 12px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.metadata-editor .row {
    display: flex;
    flex-direction: row;
    align-items: center;

    > * {
        margin: 0 8px 0 0;
        &:last-child {
            margin-right: 0;
        }
    }

    .key {
        flex: 1;
    }
    .val {
        flex: 3;
    }
}

.metadata-editor .row input {
    padding: 4px 8px;

    background: none;
    border: 1px solid $fg;
    color: $fg;

    height: 22px;

    font-family: 'Euclic Circular A';
    font-size: 14px;

    min-width: 0;

    &:focus {
        outline: none;
    }
}

.metadata-editor .row img {
    height: 22px;
    width: auto;

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* End Metadata Editor */

/* Begin Errors */

.errors {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 4px;
    left: 8px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    pointer-events: none;
    overflow: hidden;

    z-index: 20;
}

@keyframes error-enter {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes error-exit {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

.error {
    $error-color: #FF5C52;

    box-sizing: border-box;
    padding: 0.5rem;

    background: $error-color;
    border: 1px solid lighten($error-color, 20%);
    
    box-shadow: rgba($error-color, 0.4) 0px 8px 24px;

    color: darken($error-color, 60%);
    font-family: 'Euclic Circular A Regular';
    font-size: 16px;

    width: 300px;

    pointer-events: initial;
    user-select: none;
    cursor: pointer;

    margin-bottom: 4px;
    &:last-child {
        margin-bottom: 0;
    }

    &.fade-in {
        animation: error-enter 0.1s ease-in-out;
    }
    &.fade-out {
        animation: error-exit 0.1s ease-in-out;
        animation-fill-mode: forwards;
    }
}

/* End Errors */

/* Begin Settings Editor */

.settings {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;

    box-sizing: border-box;
    padding: 40px 0;

    overflow-y: scroll;
}

.leave-settings {
    position: absolute;
    top: 20px;
    left: 20px;

    width: 30px;
    height: auto;

    cursor: pointer;

    padding: 4px;

    &:hover {
        filter: invert(1);
        background: invert($fg);
    }
}

.settings .content {
    width: 50%;
    min-width: 600px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding-bottom: 14px;
}

.settings .content .title {
    font-family: "Euclic Circular A Bold Italic";
    font-size: 32px;
    color: $bg;
    text-align: center;

    padding: 8px 0;
    background: $fg;

    user-select: none;
}

.settings .content .subtitle {
    font-family: "Euclic Circular A Bold Italic";
    font-size: 26px;
    color: $fg;
    text-align: center;
    margin: 32px 0 8px 0;

    user-select: none;
}

.settings .row {
    display: flex;
    flex-direction: row;
    align-items: center;

    margin: 2px 0;
}

.settings .row .input[type="text"] {
    padding: 4px 8px;

    background: none;
    border: 1px solid $fg;
    color: $fg;

    height: 22px;

    font-family: 'Euclic Circular A';
    font-size: 14px;

    min-width: 0;

    &:focus {
        outline: none;
    }

    margin: 0;
    margin-right: 4px;

    flex: 1;
}

.settings .row .delete {
    height: 22px;
    width: auto;

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

.settings .row span {
    color: $fg;
    font-family: "Euclic Circular A Regular";
    font-size: 16px;

    margin-right: 10px;
}

.settings .profile-spacer {
    background: lighten($bg, 30%);
    height: 1px;
    width: 100%;
    margin: 8px 0;
}

.settings .button {
    margin-top: 12px;
}

.settings .row .ghost {
    flex: 1;
    // Should match the height of a .row. Used when TLS options are not shown
    // to keep the height of the row
    height: 32px;
}

.settings .row .input[type="checkbox"] {
    appearance: none;

    margin: 0;
    margin-right: 4px;

    border: 1px solid $fg;
    height: 22px;
    width: 22px;
    border-radius: 1px;

    cursor: pointer;

    &:checked {
        background: $fg;
    }
  }

/* End Settings Editor */
