/**
 * potato.
 *
 * Сайт : Начало.
 *
 *
 *
 *
 */

/*
 * -----------------------------------------------------------------------------
 *
 * Кнопки : Меню.
 *
 * -----------------------------------------------------------------------------
 */


/**
 * Кнопка-меню : База.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    position: relative;
    padding: 0;
}
.btn-menu::before,
.btn-menu::after {
    content: "";
}
.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    position: absolute;
    top: 50%;
}

/**
 * Кнопка-меню : Размеры.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    width: 36px;
    height: 36px;
    
    border-width: 0;
    border-radius: 0;
}

.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    left: 6px; right: 6px;
    
    height: 4px;
    margin-top: -2px;
}
.btn-menu::before {
    transform: translateY(-8px);
}
.btn-menu::after {
    transform: translateY(8px);
}

/* --- Варианты с подписью --- */



.btn-menu.btn-label {
    width: auto;
    min-width: 24px;
}

.btn-menu.btn-label .icon-bar,
.btn-menu.btn-label::before,
.btn-menu.btn-label::after {
    width: 24px;
}

.btn-menu.btn-label-left .label {
    padding-right: 30px;
}

.btn-menu.btn-label-left .icon-bar,
.btn-menu.btn-label-left::before,
.btn-menu.btn-label-left::after {
    left: auto; right: 0;
}

.btn-menu.btn-label-right .label {
    padding-left: 30px;
}
.btn-menu.btn-label-right .icon-bar,
.btn-menu.btn-label-right::before,
.btn-menu.btn-label-right::after {
    left: 0; right: auto;
}


/**
 * Кнопка меню : Цвета.
 * -----------------------------------------------------------------------------
 */

.btn-menu {
    
}

.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    background-color: #202020;
}

.btn-menu:hover .icon-bar,
.btn-menu:hover::before,
.btn-menu:hover::after {
    background-color: #202020;
}

/**
 * Кнопка меню : Эффекты.
 * -----------------------------------------------------------------------------
 */

.btn-menu .icon-bar {
    opacity: 1;
}
.btn-menu.close .icon-bar {
    opacity: 0;
}
.btn-menu.close::before {
    transform: rotate(45deg);
}
.btn-menu.close::after {
    transform: rotate(-45deg);
}


.btn-menu .icon-bar,
.btn-menu::before,
.btn-menu::after {
    transition: transform .3s ease;
}
.btn-menu .icon-bar {
    transition: opacity .15s ease .15s;
}
.btn-menu.close .icon-bar {
    transition: opacity .15s ease;
}