@use "variables" as *;

.ekesto-plugin-meta {

    display: flex;
    background: $color-surface-muted;
    justify-content: center;
    padding: $spacing-md $spacing-lg;

    &__inner {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: $container-max-width;
        width: 100%;
        gap: $spacing-xs;
    }

    &__link {
        display: flex;
        align-items: center;
        gap: 0.25em;
        > a {
            text-decoration: none;
            color: $color-text-secondary;
            display: inline-flex;
            align-items: center;
            &:hover,
            &:focus {
                text-decoration: underline;
            }
        }
    }

    &__img {
        display: block;
        width: auto;
        height: 20px;
    }

    &__meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: $spacing-xs;
        margin: 0;
        font-size: $font-size-small;
        color: $color-text-secondary;
        line-height: 1.3;
    }

    &__separator {
        color: $color-border-strong;
    }
}
