@import url(variables.css);

@font-face {
    font-family: 'DM Sans';
    src: url('../../../../fonts/DMSans-VariableFont_opsz,wght.ttf');
}

/* INPUTS */
.sped-input {
    --input-height: 46px;
    --input-width: 304px;
}

.sped-input[type="text"],
.sped-input[type="search"],
.sped-input[type="number"],
.sped-input.text,
.sped-input.search,
.sped-input.number {
    height: var(--input-height);
    width: var(--input-width);
    padding: 12px 16px;
    border: 1px solid var(--grey-scale-200);
    border-radius: 6px;
    background-color: var(--grey-scale-000);
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    line-height: 1rem;

    input {
        width: 100%;
        appearance: none;
        background: transparent;
        border: none;
        outline: none;
        font-family: 'DM Sans';
        font-weight: 400;
        line-height: 145%;
        font-size: inherit;
        line-height: inherit;
    }

    &::placeholder {
        color: rgba(90, 96, 121, 1);
    }
}

.sped-input:focus-within {
    outline: 1px solid black;
}

select.sped-input {
    --select-height: 46px;
    --select-width: 304px;
    height: var(--select-height);
    width: var(--select-width);
    padding: 12px 16px;
    border: 1px solid var(--grey-scale-200);
    border-radius: 6px;
    background-color: var(--grey-scale-000);
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/*.sped-input > input::placeholder {
    color: rgba(90, 96, 121, 1);
}*/

.sped-input.file {
    --input-file-width: min-content;
    --input-file-height: 45px;

    width: var(--input-file-width);
    height: var(--input-file-height);
    border: 1px solid var(--grey-scale-200);
    background-color: var(--grey-scale-000);
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover {
        background-color: var(--grey-scale-200);
    }
}

.sped-text-area {
    min-width: 304px;
    min-height: 200px;
    padding: 12px 16px;
    border: 1px solid var(--grey-scale-200);
    border-radius: 6px;
    background-color: var(--grey-scale-000);
    font-family: 'DM Sans';
}

/* BUTTONS */
a.sped-button {
    text-decoration: none;

    &:hover {
        color: var(--grey-scale-white);
    }
}

.sped-button {
    height: 45px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans';
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    color: var(--grey-scale-white);
    cursor: pointer;
    
    &:disabled {
        color: var(--grey-scale-500);
        background-color: transparent;
        border: 1px solid var(--grey-scale-200);
        cursor: not-allowed;

        &:hover {
            background-color: var(--grey-scale-200);
        }
    }

    /* COLOR STYLING */
    &:where(.submit) {
        background-color: var(--red-scale-400);

        &:hover {
            background-color: var(--red-scale-500);
        }
    }

    &.reset {
        color: var(--grey-scale-black);
        background-color: transparent;
    }
}

@media (width >= 1014px) {
    .sped-button {
        width: max-content;

        &.reset {
            background-color: var(--grey-scale-black);
            color: var(--grey-scale-white);

            &.reset:hover {
                background-color: var(--grey-scale-900);
            }
        }
    }
}

/* FORM */
.sped-form {
    background: var(--grey-scale-white);
}

/* ELEMENTS STYLES */
.sped-result-item {
    background-color: var(--grey-scale-000);
    border: 1px solid var(--grey-scale-200);
    border-radius: 10px;

    p {
        font-family: 'DM Sans';
        font-weight: 400;
        line-height: 145%;
    }

    .title,
    .performer,
    .last-name p:not(.label),
    .first-name p:not(.label) {
        font-family: 'DM Sans';
        font-weight: 600;
        line-height: 145%;
    }
}