@import '../../styleIncludes/foundation';
@import '../../styleIncludes/variables';
@import '../../styleIncludes/typography';
@import '../../styleIncludes/forms';

.react-container {
    width:100%;
}
// Hide firefox's arrows
input[type=number] {
    -moz-appearance:textfield;
}

.hamburger {
	padding:.7em 1em 0;
    transition:filter .4s ease-in-out;
    &.hamburger--squeeze {
        padding:.7em 0 0 1.5em;
    }
}
.hamburger-box {
	display: inline-block;
	position: relative;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
	&,
	&::before,
	&::after {
		height:2px;
		background-color: $lightwhite;
		border-radius: 2px;
		position: absolute;
		transition-property: transform;
		transition-duration: 0.15s;
		transition-timing-function: ease;
	}
	&::before,
	&::after {
		content: "";
		display: block;
	}
}

.hamburger--arrow.is-active {
    .hamburger-inner {
        &::before {
            transform: translate3d(-8px, 1px, 0) rotate(-45deg) scale(0.7, 1);
        }
        &::after {
            transform: translate3d(-8px, -1px, 0) rotate(45deg) scale(0.7, 1);
        }
    }
}
.hamburger--arrow {
    .hamburger-box {
        width:30px;
        height: 24px;
    }
    .hamburger-inner {
        &,
        &::before,
        &::after {
            width:27px;
        }
        &::before { top: -7px; }
        &::after { bottom: -7px; }
    }
}
.o-page {
    .hamburger {
        padding:.75em 0 0 1.3em;
    }
    .hamburger-box {
        width:23px;
        height:18px;
    }
    .hamburger-inner {
        &,
        &::before,
        &::after {
            width:20px;
        }
        &::before { top:-5px; }
        &::after { bottom:-5px; }
    }
}
.c-child-change-enter, .c-child-leave {
    min-height:100vh;
}
.c-child-change-enter {
    opacity: 0.01;
}
.c-child-change-enter.c-child-change-enter-active {
    opacity: 1;
    transition: all .5s ease-in;
}
.c-child-change-leave {
    opacity: 1;
}
.c-child-change-leave.c-child-change-leave-active {
    opacity: 0.01;
    transition: all .3s ease-in;
}

.c-popover-change-enter {
    opacity: 0.01;
}
.c-popover-change-enter.c-popover-change-enter-active {
    opacity: 1;
    transition: all .2s ease-in;
}
.c-popover-change-leave {
    opacity: 1;
}
.c-popover-change-leave.c-popover-change-leave-active {
    opacity: 0.01;
    transition: all .2s ease-in;
}
