@import '@alfalab/core-components-vars/src/index.css';

.component {
    position: relative;
    max-width: 343px;

    .formControl {
        .field {
            background-color: transparent;

            @mixin hover {
                background-color: transparent;
            }

            &:before {
                border-bottom: 1px solid var(--color-light-neutral-translucent-700);
            }
        }

        &.focused {
            .field {
                box-shadow: none;

                @mixin hover {
                    box-shadow: none;
                }
                &:before {
                    border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
                }
            }
        }
    }
}

.aspectRatioContainer {
    /* Эталонный размер 343x216 */
    padding-bottom: 63%;
}

.content {
    position: absolute;
    top: var(--gap-0);
    right: var(--gap-0);
    bottom: var(--gap-0);
    left: var(--gap-0);
    display: flex;
    align-items: center;
    padding-left: var(--gap-20);
    padding-right: var(--gap-20);
    border-radius: var(--border-radius-12);
    box-sizing: border-box;
}

.label {
    left: var(--gap-0);
    transform: translateY(-3px); /* 3px to match design */
    color: var(--color-light-text-secondary);

    transition:
        font-size 0.2s ease,
        line-height 0.2s ease,
        transform 0.2s ease;
    @mixin promo-system-mobile_small;
}

.focused .label,
.filled .label {
    color: var(--color-light-neutral-translucent-1300);
    transform: translateY(calc(-100% - 5px)); /* 5px to match design */

    @mixin paragraph_secondary_medium;
}

.focused:before {
    transform: scale(1) !important;
}

.input {
    @mixin promo-system-mobile_small;

    color: var(--color-light-neutral-translucent-1300);
    caret-color: var(--color-light-neutral-translucent-1300);

    /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
    padding-left: var(--gap-0) !important;
    padding-bottom: 5px !important; /* 5px to match design */
}

.bankLogo {
    position: absolute;
    top: var(--gap-16);
    left: var(--gap-16);

    & svg {
        display: block;

        & g {
            fill: var(--color-light-neutral-translucent-1300);
        }
    }
}

.brandLogo {
    position: absolute;
    bottom: var(--gap-20);
    right: var(--gap-20);

    & svg {
        display: block;
        fill: var(--color-light-neutral-translucent-1300);
    }
}

.usePhoto {
    display: block;
    margin: var(--gap-0);
    padding: var(--gap-0);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    user-select: none;
    cursor: pointer;
    outline: none;
    margin-bottom: var(--gap-4);
    align-self: flex-end;

    /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
    margin-right: calc(var(--gap-12) * -1);

    & svg {
        fill: var(--color-light-neutral-translucent-1300);
        display: block;
    }
}