@import 'commons';

$m-accordion--icon-l-width: 16px !default;
$m-accordion--icon-width: 12px !default;
$m-accordion--icon-l-height: 2px !default;
$m-accordion--icon-height: 1px !default;
$m-accordion--border-size: $m-border-width !default;
$m-accordion--vertical-border-size: 6px !default;
$m-accordion--border-color: $m-color-border !default;
$m-accordion--color-default: $m-color-interactive !default;

.m-accordion {

    &.m--is-dark,
    &.m--is-dark-b {
        transition: padding-top $m-transition-duration ease;
        background: $m-color-grey-darkest;

        &:not(.m--is-open) + .m-accordion {
            padding-top: $m-accordion--border-size;
        }
    }

    &__header {
        display: flex;
        align-items: center;
        cursor: pointer;
        outline-color: $m-color-interactive;

        &:not(.m--is-plain) {
            text-decoration: none;
        }

        .m-accordion.m--is-empty-content > &,
        .m-accordion.m--is-disabled > & {
            cursor: auto;
            outline: none;
        }

        .m-accordion.m--is-dark > &,
        .m-accordion.m--is-dark-b > &,
        .m-accordion.m--is-default > & {
            position: relative;
            min-height: 80px;

            &::after {
                position: absolute;
                left: 0;
                content: '';
                width: $m-accordion--vertical-border-size;
            }

            &.m--has-padding {
                padding: $m-space $m-space $m-space calc(#{$m-space} + #{$m-accordion--vertical-border-size});
            }
        }

        .m-accordion.m--is-dark > &,
        .m-accordion.m--is-default > & {
            &::after {
                background: $m-accordion--color-default;
            }
        }

        .m-accordion.m--is-dark-b > & {
            &::after {
                background: $m-color-white;
                transition: background-color 0.4s ease;
            }
        }

        .m-accordion.m--is-dark-b.m--is-open > & {
            &::after {
                background: $m-color-ul-yellow;
            }
        }

        .m-accordion.m--is-default > & {
            color: $m-color-text;
            background-color: $m-color-white;
            border-top: $m-accordion--border-size solid $m-accordion--border-color;
            border-bottom: $m-accordion--border-size solid $m-accordion--border-color;

            &::after {
                top: calc(-1 * #{$m-accordion--border-size});
                bottom: calc(-1 * #{$m-accordion--border-size});
            }
        }

        .m-accordion.m--is-default + .m-accordion.m--is-default > & {
            border-top: 0; // hide border-top on the next accordion
        }

        .m-accordion.m--is-dark > &,
        .m-accordion.m--is-dark-b > & {
            color: $m-color-white;
            background-color: $m-color-grey-darker;
            transition: border-size 0.5s ease;

            &::after {
                top: 0;
                bottom: 0;
            }
        }

        // when open, hide border-top on the next accordion
        .m-accordion.m--is-dark.m--is-open + .m-accordion.m--is-dark &,
        .m-accordion.m--is-dark-b.m--is-open + .m-accordion.m--is-dark-b & {
            border-top: 0;
        }

        .m-accordion.m--is-light>& {
            &:hover {
                .m-accordion__header-content {
                    transition: color $m-transition-duration ease;
                    color: $m-color-interactive;
                }
            }
        }

        .m-accordion.m--is-disabled & {
            outline: none;
            border-color: $m-color-disabled-light;

            &,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: $m-color-disabled;
            }

            &::after {
                background: $m-color-disabled;
            }

            &-icon {

                &::before,
                &::after {
                    background: $m-color-disabled;
                }
            }
        }

        .m-accordion.m--is-dark.m--is-disabled &,
        .m-accordion.m--is-dark-b.m--is-disabled & {
            border-color: $m-color-disabled;
        }

        .m-accordion.m--has-icon-left & {
            flex-direction: row-reverse;
        }
    }

    &__header-content {
        flex: 1 1 auto;
        max-width: 100%;
    }

    &__header-icon {
        display: block;

        &:not(.m--is-left) {
            margin-left: $m-space;
        }

        &.m--is-left {
            margin-right: $m-space;
        }

        .m-accordion.m--is-dark.m--has-icon-left &,
        .m-accordion.m--is-dark-b.m--has-icon-left &,
        .m-accordion.m--is-default.m--has-icon-left & {
            margin-right: $m-space;
        }

        .m-accordion.m--is-dark-b.m--is-open & {
            color: $m-color-ul-yellow;
        }
    }

    &__body-wrap {

        .m-accordion.m--is-dark > &,
        .m-accordion.m--is-dark-b > &,
        .m-accordion.m--is-default > & {
            &.m--is-enter-to {
                .m-accordion__body {
                    transform: translate(0, 0);
                    opacity: 1;
                }
            }

            &.m--is-enter,
            &.m--is-leave-to {
                .m-accordion__body {
                    transform: translate(0, $m-space-lg);
                    opacity: 0;
                }
            }

            > .m-accordion__body {
                transition: opacity $m-transition-duration-lg ease, transform $m-transition-duration ease;
            }
        }

        .m-accordion.m--is-default > & {
            color: $m-color-text;
            background-color: $m-color-white;
            border-bottom: 2px solid $m-color-border;
        }

        .m-accordion.m--is-dark > &,
        .m-accordion.m--is-dark-b > & {
            border-top: 2px solid $m-color-grey-darkest;
            color: $m-color-white;
            background: #303030;
            box-shadow: 0 0 7px $m-color-grey-darkest inset;
        }
    }

    &__body {
        &.m--has-padding {

            .m-accordion.m--is-dark > .m-accordion__body-wrap > &,
            .m-accordion.m--is-dark-b > .m-accordion__body-wrap > &,
            .m-accordion.m--is-default > .m-accordion__body-wrap > & {
                padding: $m-space $m-space $m-space calc(#{$m-space} + #{$m-accordion--vertical-border-size});
            }

            .m-accordion.m--is-dark.m--has-icon-left > .m-accordion__body-wrap > &,
            .m-accordion.m--is-dark-b.m--has-icon-left > .m-accordion__body-wrap > &,
            .m-accordion.m--is-default.m--has-icon-left > .m-accordion__body-wrap > & {
                padding-left: $m-space-2xl;
            }

            .m-accordion.m--is-dark.m--has-icon-left.m--has-icon-large > .m-accordion__body-wrap > &,
            .m-accordion.m--is-dark-b.m--has-icon-left.m--has-icon-large > .m-accordion__body-wrap > &,
            .m-accordion.m--is-default.m--has-icon-left.m--has-icon-large > .m-accordion__body-wrap > & {
                padding-left: calc(#{$m-space} * 2 + #{$m-accordion--icon-l-width} + #{$m-accordion--vertical-border-size});
            }

            .m-accordion.m--is-light > .m-accordion__body-wrap > & {
                padding-top: $m-space-xs;
            }

            .m-accordion.m--is-light.m--has-icon-left > .m-accordion__body-wrap > & {
                padding-left: 36px; // Magic number
            }

            .m-accordion.m--is-light.m--has-icon-left.m--has-icon-large > .m-accordion__body-wrap > & {
                padding-left: 40px; // Magic number
            }

            .m-error-technical-difficulty & {
                @include m-font-size();
            }
        }
    }

    &__hidden {
        @include m-visually-hidden();
    }
}