@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700');

/* TT2020 font is distributed under SIL Open Font License */
@font-face {
  font-family: TT2020;
  src: url(fonts/TT2020/TT2020Base-Regular.ttf) format('truetype');;
}

/* Use default color with transparency for placeholders */
:root {
    --form-fg: var(--fg);
    --form-fg-placeholder: var(--fg);

}
input::placeholder,
textarea::placeholder {
    opacity: 0.5;
}

/* Hacking header */
header {
    margin: 2rem;
}
header nav ul li a {
    text-decoration: underline;
}
header nav ul li a::before {
    content: "";
}
header h1 {
    padding: 0;
}
header p {
    text-align: center;
}

/* Body text styling */
#issue-body-textarea, code {
    font-size: 1.6rem;
    font-family: TT2020, monospace;
    font-weight: normal;
}

/* File loading button */
form input[type=file] {
    grid-column: span 2;
}
input[type=file]::file-selector-button {
    background-color: transparent;
    color: var(--fg);
    padding: 4px;
    margin-right: 1rem;
    border: 1px solid var(--fg);
    cursor: pointer;
}
input[type=file]:disabled::file-selector-button {
    opacity: 0.5;
    border-style: dashed;
    cursor: not-allowed;
    text-decoration: line-through;
}
form input[type=file] {
    grid-column: span 2;
}

/* Custom complex fieldset */
form .grid-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 0.5rem 0.5rem;
    align-items: center;
}
form .col-8 {
    grid-column: span 8 !important;
}
form .col-7 {
    grid-column: span 7 !important;
}
form .col-3 {
    grid-column: span 3 !important;
}
form .col-2 {
    grid-column: span 2 !important;
}

/* Do not separate labels and selects */
fieldset label:has(select) {
    white-space: nowrap;
}

/* Select options colors */
select option {
    background-color: var(--bg);
    color: var(--fg);
}

/* Inline button for custom grids */
button.inline-button {
    display: inline-block;
    padding: 2px;
    margin-top: 0;
}

/* Force image filename wrap */
#image-list span {
    overflow-wrap: break-word;
}

/* Loading animation */
@keyframes spin {
    from {transform: rotateZ(0deg);}
    to {transform: rotateZ(360deg);}
}
.loader {
    display: none;
    animation: spin 5s linear infinite;
    font-size: 2rem;
}