@import "../variables/variables";
@import "../mixins/private/token-mixins";

div.file-input {
    display: grid;
    grid-template-areas: "center";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

input.file-input__input[type="file"] {
    @include border-radius-token(file-input-border-radius, border-radius-100);

    grid-area: center;
}

div.file-input__container {
    @include background-color-token(
        file-input-background-color,
        color-background-secondary
    );

    @include border-radius-token(file-input-border-radius, border-radius-100);

    @include border-color-token(file-input-border-color, color-neutral-500);

    border: 1px dashed;
    display: flex;
    flex-direction: row;
    gap: var(--spacing-100);
    grid-area: center;
    min-width: fit-content;
    padding: var(--spacing-200);
    pointer-events: none;
    z-index: 1;
}

div.file-input___container--dragged-over {
    @include background-color-token(
        file-input-dragged-over-background-color,
        color-background-tertiary
    );
}

div.file-input__upload-icon {
    @include background-color-token(
        file-input-upload-icon-background-color,
        color-background-primary
    );

    align-self: center;
    border-radius: 99px;
    padding: var(--spacing-150);
}

div.file-input__upload-icon svg {
    @include fill-token(file-input-upload-icon-fill, color-foreground-primary);

    height: var(--spacing-300);
    width: var(--spacing-300);
}

div.file-input__content {
    align-items: start;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

.file-input__content-header {
    @include color-token(
        file-input-content-header-color,
        color-foreground-primary
    );

    font-size: var(--font-size-14);
    font-weight: bold;
    line-height: var(--spacing-250);
    margin-block: 0 var(--spacing-50);
}

span.file-input__content-subheader {
    @include color-token(
        file-input-content-subheader-color,
        color-foreground-secondary
    );

    font-size: var(--font-size-12);
    font-weight: 400;
    line-height: var(--spacing-200);
    margin-block-end: var(--spacing-100);
}

span.file-input__content-cta {
    text-decoration-line: underline;
}

@media screen and (min-width: $_screen-size-MD) {
    div.file-input__container {
        gap: var(--spacing-300);
        padding: var(--spacing-300);
    }

    div.file-input__upload-icon {
        padding: var(--spacing-300);
    }

    .file-input__content-header {
        font-size: var(--font-size-16);
        line-height: var(--spacing-300);
    }

    span.file-input__content-subheader {
        font-size: var(--font-size-14);
        line-height: var(--spacing-250);
    }
}
