@import '_variables.scss';

.k-embed-field {
    .k-input-icon {
        width: auto;
        .k-embed-infos {
            display: flex;
            align-items: center;
            line-height: 1;
            .k-embed-status {
                margin-right: 3px;
                &-loading {
                    display: inline-block;
                    .loader {
                        display: inline-block;
                        overflow: hidden;
                        height: 1.3em;
                        margin-top: -0.3em;
                        line-height: 1.5em;
                        font-size: 1rem;
                        vertical-align: text-bottom;
                        &::after {
                            content: "⠋\A⠙\A⠹\A⠸\A⠼\A⠴\A⠦\A⠧\A⠇\A⠏";
                            display: inline-table;
                            white-space: pre;
                            text-align: left;
                            animation: spin10 0.8s steps(10) infinite;
                        }
                    }
                    @keyframes spin10 { to { transform: translateY(-15.0em); } }
                }
                &-synced, &-failed {
                    font-size: 0.8rem;
                    padding: 2px 5px 2px 6px;
                    display: inline-block;
                    border-radius: 3px;
                }
                &-synced {
                    background: var(--color-green-300);
                    color: black;
                    display: flex;
                    align-items: center;
                    .checkmark {
                        position: relative;
                        width: 20px;
                        height: 20px;
                        &:before {
                            content: "";
                            position: absolute;
                            top: 5px;
                            left: 7px;
                            width: 9px;
                            height: 6px;
                            transform: rotate(-45deg);
                            background: none;
                            border: solid black;
                            border-width: 0 0 1px 1px;
                        }
                    }
                }
                &-failed {
                    background: var(--color-red-300);
                    color: black;
                    display: flex;
                    align-items: center;
                    .cross {
                        position: relative;
                        width: 20px;
                        height: 20px;
                        &:before, &:after {
                            content: "";
                            position: absolute;
                            left: 11px;
                            top: 5px;
                            height: 10px;
                            width: 1px;
                            background-color: black;
                        }
                        &:before {
                            transform: rotate(45deg);
                        }
                        &:after {
                            transform: rotate(-45deg);
                        }
                    }
                }
            }
        }
        &-button {
            width: 2.5em;
        }
    }
}

.preview {
    position: relative;
    margin-bottom: 0.5rem;
    &-content {
        padding: 1rem;
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        iframe {
            max-width: 100% !important;
        }
        img {
            width: auto !important;
            height: 30vh !important;
        }
    }
    &-background {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: $color-light url($pattern);
        opacity: 0.45;
    }
    &[data-provider=youtube],
    &[data-provider=vimeo] {
        .preview-content {
            padding: 0;
            iframe {
              width: 100%;
              aspect-ratio: 16 / 9;
              height: auto;
              background: none;
            }
        }
    }
}

.k-panel[data-theme="dark"] {
    .preview-background {
        opacity: .2;
    }
}

.k-embed-field-preview {
    padding: 0.375rem var(--table-cell-padding);
    &-inner {
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-right: .5rem;
        font-size: var(--font-size-tiny);
        background: light-dark(var(--bubble-back), rgba(255, 255, 255, .1));
        color: light-dark(black, white);
    }
    .k-embed-icon {
        --fit: cover;
        --back: var(--pattern);
    }
}