@import 'commons';

.m-empty-area {
    position: relative;
    padding: $m-space;


    @media (min-width: $m-mq-min-sm) {
        padding: $m-space-lg;
    }

    &__content-area {
        width: 100%;
        color: $m-color-grey-dark;
    }

    .m-empty-area__title {
        margin-top: 0;
        font-weight: $m-font-weight-bold;
        @include m-font-size('md');

        +.m-empty-area__subtitle {
            margin-top: $m-space-2xs;
        }
    }

    &__subtitle {
        font-weight: $m-font-weight;
        @include m-font-size('sm');
    }
}

.m-empty-area.m--is-background-style-light {
    background: $m-color-grey-lightest;
}

.m-empty-area.m--is-display-mode-inline {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    justify-content: center;

    &.m--has-content-area {
        .m-empty-area__button {
            margin-top: $m-space-xs;
        }
    }

    .m-empty-area {
        &__content-area {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        &__title-area {
            text-align: center;
        }

        &__icon {
            +.m-empty-area__title-area {
                margin-left: calc(#{$m-space-xs} * 1.5);
                text-align: left;
            }
        }
    }
}


.m-empty-area.m--is-display-mode-block {
    display: flex;
    flex-direction: column;
    align-items: center;


    .m-empty-area {
        &__content-area {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        &__icon {
            +.m-empty-area__title-area {
                margin-top: calc(#{$m-space-xs} * 1.5);
            }
        }

        &__button {
            align-self: flex-start;

            +.m-empty-area__content-area {
                margin-top: $m-space-xs;
            }
        }
    }
}