@import "mithril-material-forms/lib/interface";
@import "mithril-material-forms/lib/typography";
@import "mithril-material-forms/lib/colors";


// separator button inner layers (inside of card)
.editron-container__child .editron-container__button--add {
    @include clickable();
    text-align: center;

    .mmf-icon {
        color: rgba($mmf-color--light, $mmf-opacity--primary);
        text-shadow: 0 3px 6px rgba($mmf-color--dark, 0.16), 0 3px 6px rgba($mmf-color--dark, 0.23);
    }

    &:hover .mmf-icon {
        color: $mmf-color--light;
        text-shadow: 0 14px 28px rgba($mmf-color--dark, 0.25), 0 10px 10px rgba($mmf-color--dark, 0.22);
    }
}

.editron-container--array.has-add-disabled {
    & > .editron-container__header .mmf-icon--add {
         display: none;
    }
}

// array item wrapper
.editron-editor.has-remove-disabled {
    & > .editron-container > .editron-container__header {
        .mmf-icon--delete {
            visibility: hidden; // hide, but do not collapse
        }
    }
}

.editron-container__controls {
    list-style: none;
}

.editron-item.with-index {

    &:before {
        content: attr(data-index);
        display: inline-block;
        position: absolute;
        left: -$mmf-block;
        width: $mmf-block;
        height: $mmf-block;
        line-height: $mmf-block;
        text-align: center;

        color: rgba($mmf-color--light, $mmf-opacity--hint);
        font-size: $mmf-text-size--meta;
    }
}