@import url("../style.css");

/* selecionar texto */
::selection {
    text-shadow: 0 0 2px #987654;
    color: #987654;
}
  
::-moz-selection {
    text-shadow: 0 0 2px #987654;
    color:#987654;
}

/* scrollbar */
@supports (-moz-appearance: none) {
    * {
        scrollbar-color: #98765450 #000000;
        scrollbar-width: thin;
        scrollbar-gutter: stable;
    }
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background: #000000;
}
  
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #98765450;  
}

::-webkit-scrollbar-thumb:hover {
    background: #98765450;  
}

/* body */
body {
    background: transparent;
}

/* favoritos */
.favoritos {
    width: 100%;
    padding: 25px 15px 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, 80px);
    justify-content: center;
    border-bottom: 1px dashed var(--border);
}

.favoritos p {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    font-family: "Help Me";
    border-bottom: 1px dashed var(--border);
}

.favoritos figure {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.favoritos img {
    width: 80px;
    height: 120px;
}

.favoritos figcaption {
    width: 100px;
    font-size: 0.5rem;
    text-align: center;
}

/* formulários */
.filmes-form {
    left: 50%;
    top: 50%;
    width: 325px;
    position: fixed;
    display: none;
    transform: translate(-50%, -50%);
    background-color: #1a1a1a3c;
    transition: opacity 0.5s ease-in-out;
}

.filmes-form p {
    padding: 0px 5px 5px 5px;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
}

.filmes-form form {
    display: flex;
    flex-flow: column wrap;
    gap: 10px;
}

.filmes-form label {
    color: white;
}

.filmes-form input,
.filmes-form textarea {
    width: 100%;
    font-size: 0.85rem;
    border: none;
    border-bottom: 1px dashed #ffffff;
    background: transparent;
}

.filmes-form input::-webkit-outer-spin-button,
.filmes-form input::-webkit-inner-spin-button {  /* chrome, safari, edge, opera */
    margin: 0px;
    -webkit-appearance: none;
}

.filmes-form input[type="number"] { /* firefox */
    appearance: textfield;
    -moz-appearance: textfield;
}

.filmes-form input[type="checkbox"] {
    width: 15px;
    accent-color: var(--main);
}

.filmes-form textarea {
    resize: vertical;
}

.filmes-form .reassistido {
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}

.filmes-form div {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.filmes-form button {
    margin: 10px auto;
}

button {
    margin: 2px auto;
    padding: 5px 15px;
    border: 1px dashed #00ffff;
    border-radius: 5px;
    cursor: pointer;
    color: #ffffff;
    background-color: transparent;
    transition: 0.2s;
}

button:hover {
    transform: scale(1.05);
}

/* tabela de filmes */
.filmes {
    padding: 5px 10px;
}

.filmes p {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    font-family: "Help Me";
}

.filmes table {
    table-layout: fixed;
    border-collapse: collapse;
}

.filmes th {
    padding: 10px 0px;
    text-align: left;
    text-decoration: underline;
    color: #ffffff;
}

.filmes th:nth-child(1) { width: 40%; }
.filmes th:nth-child(2) { width: 4ch; }
.filmes th:nth-child(3) { width: auto; }
.filmes th:nth-child(4) { width: 10ch; }
.filmes th:nth-child(5) { width: auto; }
.filmes th:nth-child(6) { width: 20%; }
.filmes th:nth-child(7) { width: auto; }

.filmes td {
    padding: 2.5px;
}

.filmes td:nth-child(6) span,
.filmes td:nth-child(7) span {
    display: inline-block; 
    max-height: 5em;
    overflow-y: scroll;
}

.filmes tr:nth-child(even) {
    background-color: rgb(0, 0, 0, 0.35);
}

.filmes .reassistido {
    font-size: 0.5rem;
    color: #ffffff;
}

/* tabela assistir mais tarde */
.watchlist .box {
    --box-shadow-color: gray;
    animation: box-shadow 3.1s infinite;
}

/* tags e comentários */
.filmes .mode2 {
    display: none;
}

.filmes .mode2 span {
    font-size: 0.75rem;
}

/* opções na tabela */
.filmes .opcoes {
    display: flex;
    justify-content: center;
}

.filmes .opcoes button {
    width: 25px;
    padding: 0px;
    font-size: 0.75rem;
    border: none;
}

.filmes .opcoes button:hover {
    transform: scale(1.25);
}

/* botões laterais */
.btns {
    top: 50px;
    right: 25px;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    gap: 15px;
}

.btns button {
    width: 75px;
    height: 50px;
    padding: 0px;
    display: flex;
    text-align: center;
    align-items: center;
    font-size: 0.65rem;
    border: none;
    border-radius: 0.3rem;
    transition: 0.2s;
}

.btns button:hover {
    letter-spacing: 0.5px;
}

.opcoes-btn {
    --box-shadow-color: blue;
    animation: box-shadow 3.1s infinite;
}

.tabela-btn { 
    --box-shadow-color: purple;
    animation: box-shadow 3.1s infinite;
}

.adicionar-btn {
    --box-shadow-color: green;
    animation: box-shadow 3.1s infinite;
}

.wl-btn {
    --box-shadow-color: gray;
    animation: box-shadow 3.1s infinite;
}

/* viewports */
@media (max-width: 768px) {
    .btns {
        top: auto;
        right: auto;
        position: relative;
        display: flex;
        flex-flow: row wrap;
        gap: 15px;
    }
}