input {
    padding: 0px 8px;
    box-sizing: border-box;

    background-color: var(--col-darkest);
    color: var(--col-lightest);
    border: 1px solid var(--col-dark);
    border-radius: 4px;

    font-family: 'Pretendard';
}

input[type="text"] {
    width: 100%;
    min-height: 32px;
    max-height: 32px;
}

input[type="number"] {
    width: 100px;
    min-height: 32px;
    max-height: 32px;
}

input[type="color"] {
    width: 100px;
    min-height: 32px;
    max-height: 32px;

    padding: 0;
}

input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: pointer;
}

input[disabled] {
    color: var(--col-light);
}

select {
    width: 100%;
    min-height: 32px;
    max-height: 32px;

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

    background-color: var(--col-darkest);
    color: var(--col-lightest);
    border: 1px solid var(--col-dark);
    border-radius: 4px;

    font-family: 'Pretendard', sans-serif;
}

div.viewer-viewport {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
}

div.viewer-character {
    width: 200%;
    height: 200%;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) scale(0.5);

    /* Upscaled to 2x, change scale(0.5) and width and height if changing factor */
}

div.viewer-main {
    width: 80%;
    height: 70%;

    position: absolute;
    top: 50%;
    left: 50%;

    overflow: hidden;

    transform: translate(-50%, -50%);

    touch-action: none;
}

div.viewer-panel {
    display: flex;
    align-items: flex-start;
    justify-content: stretch;

    position: relative;

    flex-direction: column;
    row-gap: 4px;

    width: 256px;
    height: 100%;

    padding: 16px;
    box-sizing: border-box;

    background-color: var(--col-darker);
    border: 1px solid var(--col-dark);
    border-radius: 4px;

    overflow-y: auto;

    font-size: 14px;

    transition: left 0.4s var(--ease-quint-o),
                top 0.4s var(--ease-quint-o),
                bottom 0.4s var(--ease-quint-o),
                right 0.4s var(--ease-quint-o);
}

div.viewer-panel.horizontal {
    display: flex;
    align-items: center;
    justify-content: stretch;

    flex-direction: row;

    width: unset;
    height: 48px;

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

    column-gap: 4px;
}

div.viewer-panel > hr {
    width: 100%;

    margin: 8px 0;
}

div.viewer-panel#panel-nikke {
    position: absolute;
    top: 0;
    left: 0;
}

div.viewer-panel#panel-playback {
    position: absolute;
    bottom: 0;
    left: 264px;
    right: 264px;
}

div.viewer-panel#panel-settings {
    position: absolute;
    top: 0;
    right: 0;
}

div.viewer-panel#panel-layer {
    position: absolute;
    top: 50%;
    right: 264px;

    width: 256px;
    height: 256px;

    transform: translateY(-50%);
}

div.viewer-panel#panel-pieces {
    position: fixed;
    right: 8px;
    bottom: 8px;

    width: 256px;
    height: 256px;
}

div.square-button {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;

    box-sizing: border-box;

    background-color: var(--col-darkerer);
    color: #ccc;
    border: 1px solid var(--col-dark);
    border-radius: 4px;

    font-size: 24px;

    transition: background-color 0.2s var(--ease-sine-io),
                color 0.2s var(--ease-sine-io),
                left 0.4s var(--ease-quint-o),
                bottom 0.4s var(--ease-quint-o),
                top 0.4s var(--ease-quint-o),
                right 0.4s var(--ease-quint-o),
                opacity 0.4s var(--ease-quint-o);

    cursor: pointer;
}

div.square-button#viewer-hide-nikke {
    position: absolute;

    top: 0;
    left: 264px;
}

div.square-button#viewer-hide-playback {
    position: absolute;

    bottom: 54px;
    right: 264px;
}

div.square-button#viewer-hide-settings {
    position: absolute;

    top: 0;
    right: 264px;
}

div.button {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-grow: 1;

    position: relative;
    
    width: 100%;
    max-height: 32px;

    padding: 8px 16px;
    box-sizing: border-box;

    background-color: var(--col-darkerer);
    color: #ccc;
    border: 1px solid var(--col-dark);
    border-radius: 4px;

    font-family: 'Pretendard';

    transition: background-color 0.2s var(--ease-sine-io),
                color 0.2s var(--ease-sine-io);
    
    cursor: pointer;
}

div.button:hover, div.square-button:hover {
    background-color: var(--col-dark);
    color: var(--col-lightest);
}

div.button[disabled], div.square-button[disabled] {
    pointer-events: none;
    color: var(--col-light);
}

div.button > a, div.square-button > a {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
}

div.list#panel-nikke-results {
    width: 100%;
    height: 100%;
}

div.list#panel-settings-anim-track-list,
div.list#panel-settings-layer-list {
    width: 100%;
    min-height: 256px;
    max-height: 256px;
}

div.list#panel-settings-anim-track-list,
div.list#panel-settings-layer-list {
    padding: 0;
}

div.list#page-list {
    width: 100%;
    min-height: 128px;
    max-height: 128px;

    padding: 0;
}

div.viewer-hlist {
    display: flex;
    align-items: center;
    justify-content: stretch;

    width: 100%;
    height: 32px;

    column-gap: 4px;
}

div.viewer-hgap {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 32px;
}

div.viewer-timeline {
    width: 100%;
    height: 32px;

    background-color: var(--col-darkest);
    border: 1px solid var(--col-dark);
    border-radius: 4px;
    box-sizing: border-box;

    touch-action: none;
}

div.viewer-timeline > div {
    width: 100%;
    height: 100%;

    background-color: var(--col-lightest);
    border-radius: 4px;
}

div.nikke-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    width: 100%;
    min-height: 64px;
    max-height: 64px;

    border-bottom: 1px solid var(--col-dark);

    transition: background-color 0.2s var(--ease-sine-io);

    cursor: pointer;
}

div.nikke-item:hover {
    background-color: var(--col-darker);
}

div.nikke-item:last-child {
    border-bottom: none;
}

div.nikke-item > div.nikke-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;

    box-sizing: border-box;

    border-radius: 4px;
    border: 1px solid var(--col-dark);
    background-color: var(--col-darker);

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

div.nikke-item > span {
    display: -webkit-box;
    line-clamp: 3;
    box-orient: vertical;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

div.anim-track-item, div.layer-item, div.page-item {
    display: flex;
    align-items: center;
    justify-content: stretch;

    flex-direction: row;

    gap: 4px;

    width: 100%;
    height: 48px;

    padding: 8px;
    box-sizing: border-box;

    background-color: var(--col-darkerer);
    border-bottom: 1px solid var(--col-dark);
}

div.anim-track-item:nth-child(even),
div.layer-item:nth-child(even) {
    background-color: var(--col-darkest);
}

div.button.inactive, div.square-button.inactive {
    color: var(--col-light);
}

div.button.active, div.square-button.active {
    color: var(--col-accent);
}

div#piece-viewer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba(0, 0, 0, 0.6);
    z-index: 8008136;

    transition: opacity 0.2s var(--ease-sine-io);
}

div#piece-viewer > img {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    max-width: calc(100% - 64px);
    max-height: calc(100% - 64px);

    background-color: gray;
}

div#piece-viewer-settings {
    position: fixed;

    width: 256px;
    height: 256px;
    right: 8px;
    bottom: 8px;

    row-gap: 4px;
}

div#piece-tooltip {
    font-size: 14px;

    background-color: var(--color-darkerer);
    border: 1px solid var(--color-dark);

    padding: 4px;
    border-radius: 4px;

    position: absolute;

    z-index: 999999;
}

canvas#piece-vertexview {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 999998;

    pointer-events: none;
}

div#piece-tooltip {
    font-size: 14px;

    background-color: var(--col-darkerer);
    border: 1px solid var(--col-dark);

    padding: 4px 8px;
    border-radius: 4px;

    position: absolute;
}

div.viewer-blocker {
    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: rgba(0, 0, 0, 0.6);
    color: var(--col-lightest);

    font-size: 24px;
}