@import "mithril-material-forms/lib/units";
@import "mithril-material-forms/lib/typography";
@import "mithril-material-forms/lib/form";
@import "mithril-material-forms/lib/elevation";
@import "mithril-material-forms/theme/card";
@import "mithril-material-forms/lib/colors";
@import "../sass/export-once";


@if export-once("editron-core/styles/mmf-card") {

    .mmf-card {
        color: $mmf-color--dark;
        margin-bottom: $mmf-block;
        background-color: $mmf-color--contrast;

        .editron-container__header {
            opacity: $mmf-opacity--primary;
            // ensure mmf-cards are not clipped by header
            border-top-left-radius: $mmf-radius;
            border-top-right-radius: $mmf-radius;

            h2 {
                color: $mmf-color--dark;
            }
        }

        // deactivate hover on dummy icons
        .editron-container__title .mmf-icon:hover {
            color: $mmf-color--dark;
            cursor: default;
        }
    }

    // CARD MAIN HEADER
    .mmf-card > .editron-container__header {
    }

    // CARD HEADERS
    .mmf-card {
        // LEVEL 1 - first header is outside of card (.editron-container)

        // LEVEL 2 - card header
        > .editron-container__header {

            .mmf-icon {
                color: $mmf-color--dark;
                &:hover {
                    color: darken($mmf-color--dark, $mmf-color-distance--focus);
                }
            }
        }

        // LEVEL 3 - nested header within card
        .editron-container .editron-container__header {
            padding: 0;

            h2 {
                @include font-regular();
                text-transform: uppercase;
                padding: 2 * $mmf-unit;
                font-size: $mmf-text-size--meta;
                box-sizing: border-box;
                min-height: $mmf-block;

                opacity: $mmf-opacity--secondary;
            }

            .mmf-icon {
                color: $mmf-color--dark;
                &:hover {
                    color: darken($mmf-color--dark, $mmf-color-distance--focus);
                }
            }
        }
    }

    // FLOATING ADD BUTTON
    .mmf-card {
        // separator button inner layers (inside of card)
        .editron-container__button--add {
            @include with-form(); // set same style as form to visually group add-button to item

            .mmf-icon {
                color: rgba($mmf-color--dark, $mmf-opacity--secondary);
                text-shadow: none;
            }

            &:hover .mmf-icon {
                color: rgba($mmf-color--dark, $mmf-opacity--primary);
                text-shadow: none;
            }
        }
    }


    // NESTED LISTS
    .mmf-card {
        // @temp sublist separation
        .editron-container__children .editron-container__children > .editron-container__child .editron-container__header {
            box-shadow: inset 0 10px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
        }
    }

    // ONEOF EDITOR selection above a card
    .editron-container--oneof > .editron-value {
        margin-bottom: $mmf-block;
    }

    .mmf-card .editron-container--oneof > .editron-value {
        margin-bottom: 0;
    }
}