@import '_deleteButton';

.bg__metadata-type {
    position: relative;
    padding-right: 10px;
    font-size: 0.9em;
    padding-bottom: 5px;
    text-align: right;

    &:hover {
        > .delete {
            display: block;
        }
    }

    &.edit {
        text-align: left;
        background-color: $clGrey;
        padding: 10px;
        font-size: 0.8em;
        margin-bottom: 10px;

        input,
        form {
            margin: 0;
            margin-block-end: 0;
        }
        textarea {
            margin-bottom: 5px;
        }
    }

    > ul {
        background: white;
        font-family: $fontBody;
        display: block;
        border: 0;
        border-bottom: 1px solid $clGreyTint;
        padding: 5px;
        text-align: left;
        margin-bottom: 3px;
        list-style: none;
        > li {
            display: flex;
            justify-content: stretch;

            > strong {
                min-width: 100px;
                flex-grow: 0;
            }
        }
    }

    > .template,
    > .created {
        text-align: right;
        font-size: 0.8em;
        text-transform: uppercase;
        margin-left: 10px;
    }

    > .delete {
        @include deleteButton();
        right: 9px;
        border-radius: 2px;
    }
}