/*--------------------------------------------------------------------------*\
    Burger lines
\*--------------------------------------------------------------------------*/

.burger-label__line {
    /*box*/
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 22px;
    height: 2px;

    /*transform*/
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    /*transition*/
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

.burger-label__line::before,
.burger-label__line::after {
    /*box*/
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 22px;
    height: 2px;

    /*text*/
    content: '';

    /*transform*/
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    /*transition*/
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.burger-label__line::before {
    /*transform*/
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
}

.burger-label__line::after {
    /*transform*/
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
}

/*--------------------------------------------------------------------------*\
        Primary color (opposite color of header color)
\*--------------------------------------------------------------------------*/

.burger-label--primary>.burger-label__line,
.burger-label--primary>.burger-label__line::before,
.burger-label--primary>.burger-label__line::after {
    /*background*/
    background-color: var(--c-primary-1);
}

/*--------------------------------------------------------------------------*\
        Secondary color (opposite color of header color)
\*--------------------------------------------------------------------------*/

.burger-label--secondary>.burger-label__line,
.burger-label--secondary>.burger-label__line::before,
.burger-label--secondary>.burger-label__line::after {
    /*background*/
    background-color: var(--c-tertiary-4);
}

/*--------------------------------------------------------------------------*\
        Hover
\*--------------------------------------------------------------------------*/

.burger-input:not(:checked)+.burger-label:hover>.burger-label__line::before {
    /*transform*/
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.burger-input:not(:checked)+.burger-label:hover>.burger-label__line::after {
    /*transform*/
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
}

/*--------------------------------------------------------------------------*\
        Opened
\*--------------------------------------------------------------------------*/

.burger-input:checked+.burger-label>.burger-label__line {
    /*background*/
    background-color: transparent;
}

.burger-input:checked+.burger-label>.burger-label__line::before {
    /*transform*/
    -webkit-transform: translateY(0px) rotate(45deg);
    transform: translateY(0px) rotate(45deg);
}

.burger-input:checked+.burger-label>.burger-label__line::after {
    /*transform*/
    -webkit-transform: translateY(0px) rotate(-45deg);
    transform: translateY(0px) rotate(-45deg);
}