@import 'constants';

@mixin collapsible-base {
	margin: $collapsible-default-margin;

	&:last-child {
		margin-bottom: 0;
	}
}

@mixin collapsible-header-base {
	display: inline-block;
	padding: 0; 
	cursor: pointer;
	margin-bottom: $collapsible-header-default-margin;
}

@mixin collapsible-body-base {
	margin-bottom: $collapsible-header-default-margin;
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s ease-in-out;

	ul {
		&.collapsible-submenu {
            margin-top: 0;
			margin-bottom: $collapsible-submenu-default-margin;
			padding-left: $collapsible-submenu-outer-hpadding;			
			list-style: none;

			li {
				padding: $collapsible-submenu-item-padding;
				cursor: pointer;
				margin: 0 0 $collapsible-submenu-item-default-margin;

                &:last-child {
                    margin-bottom: 0;
                }
			}
		}
	}
}

@mixin collapsible-styled {
	.collapsible-toggle:not(:checked) ~ {
		.collapsible-header {
			border-radius: $border-radius;
		}

		.collapsible-body {
			border: none;
			padding: 0;
			transition: max-height 0.25s ease-in-out, padding 0.4s ease-in-out;
		}
	}

	.collapsible-header {
		display: block;
        padding: $collapsible-styled-header-padding;
        margin-bottom: 0;
		background: $color-dark;
        color: $color-white;
        border-radius: $border-radius $border-radius 0 0;
        transition: background 0.2s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out;
        
        &:hover, &:focus {
            background: darken-1($color-dark);
            border-color: darken-1($color-dark);
        }

        &:active {
            background: darken-2($color-dark);
            border-color: darken-2($color-dark);
        }
    }

	.collapsible-body {
        border: 1px solid $color-dark;
        border-top: 0;
        border-radius: 0 0 $border-radius $border-radius;
        padding: $collapsible-styled-body-padding;


        .collapsible-submenu {
        	padding-left: 0;
        }
	}

	.collapsible {
		.collapsible-header {
			border: none;
	        border-radius: 0;
	        color: $color-black;        
	        background: $color-white;        
	        padding: 0;
            display: inline-block;

            &:hover, &:focus, &:active {
                background: transparent;
                border-color: none;
            }
		}

		.collapsible-body {
			border: none;
			padding: 0;

			.collapsible-submenu {
				padding-left: $collapsible-submenu-outer-hpadding;	
			}
		}
	}
}

@mixin menu-colors {
    @each $colorName, $color in $color-list {
        &.#{$colorName}{
            .collapsible-header {
                background: $color;

                &:hover, &:focus {
                    background: darken-1($color);
                    border-color: darken-1($color);
                }

                &:active {
                    background: darken-2($color);
                    border-color: darken-2($color);
                }
            }

            .collapsible-body {
                border-color: $color;
            }
        }
    }
}