@import 'commons';
$m-panel--screen--max: 639px;
$m-panel--screen--min: 640px;

.m-panel {
    position: relative;
    display: flex;
    flex-direction: column;

    @include m-is-ie() {
        display: block;
    }

    &.m--is-skin-light {
        background: $m-color-white;
    }

    &.m--is-skin-dark {
        background: $m-color-grey-light;
    }

    &.m--is-skin-darker {
        background: $m-color-grey-darker;
        color: $m-color-white;
    }

    &.m--has-border {
        border: $m-border-width-sm solid $m-color-border;
    }

    &.m--has-border-large {
        border: $m-border-width-lg solid $m-color-border;
    }

    &.m--has-shadow {
        box-shadow: $m-box-shadow-sm;
    }

    &.m--is-highlighted {
        border-top: 0;

        &::before {
            position: relative;
            top: 0;
            content: '';
            display: block;
            height: 4px;
            background-color: $m-color-accent;
        }

        &.m--has-border {
            &::before {
                right: - #{$m-border-width-sm};
                left: - #{$m-border-width-sm};
                width: calc(100% + #{$m-border-width-sm} * 2); // Magic number
            }
        }

        &.m--has-border-large {
            &::before {
                right: - $m-border-width-lg;
                left: - $m-border-width-lg;
                width: calc(100% + #{ $m-border-width-lg * 2}); // Magic number
            }
        }

        &:not(.m--has-border) {
            &::before {
                right: 0;
                left: 0;
                width: 100%;
            }
        }
    }

    &.m--has-padding-large {
        .m-panel {

            &__header,
            &__footer {
                &:not(.m--no-padding) {
                    padding: $m-space;

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

            &__body {
                &:not(.m--no-padding) {
                    padding-right: $m-space;
                    padding-left: $m-space;

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

                &.m--has-padding-top {
                    padding-top: $m-space;

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

                &.m--has-padding-bottom {
                    padding-bottom: $m-space;

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

    &__header,
    &__footer {
        &:not(.m--no-padding) {
            padding: $m-space $m-space-xs;

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

    &__header {
        position: relative;
        display: flex;
        align-items: center;

        &.m--has-menu {
            padding-right: $m-touch-size;
        }

        &.m--is-right-content-alone {
            justify-content: flex-end;
        }

        &:not(.m--is-right-content-alone) {
            justify-content: space-between;
        }

        &:not(.m--no-padding) {
            &.m--has-menu {
                padding-right: 3px + $m-touch-size;
            }
        }

        &__content {
            flex: 1 1 auto;

            > :first-child {
                margin-top: 0;

                > :first-child {
                    margin-top: 0;
                }
            }
        }

        &__menu {
            .m--is-skin-light & {
                right: $m-space;
            }
        }
    }

    &__body,
    &__footer {
        > :first-child {
            margin-top: 0;
            padding-top: 0;

            > :first-child {
                margin-top: 0;
            }
        }
    }

    &__body {
        flex: 1 1 auto;
        position: relative;

        &:not(.m--no-padding) {
            padding-right: $m-space-xs;
            padding-left: $m-space-xs;

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

        &.m--has-padding-top {
            padding-top: $m-space;
        }

        &.m--has-padding-bottom {
            padding-bottom: $m-space;
        }

        @include m-scrollbar();
    }

    &__footer {
        border-top: 1px solid $m-color-grey-light;
    }
}