/* ------------------ */
/* ------arrow------- */
/* ------------------ */

.arrow {
    height: 16px;
    width: 50px;
    display: flex;
    align-items: center;
    position: relative;
}

/*
.arrow:hover .shaft {
    height: 3px;
}
.arrow:hover .point {
    height: 2px;
}
*/

.shaft,
.point {
    background-color: #2e2e2f;
    height: 1px;    
}

.shaft {
    width: 50px;
    position: absolute;
}

.point {
    width: 8px;
    position: absolute;
}

.arrow-right .top-point {
    bottom: 7px;
    right: 0;
    transform-origin: top right;
    transform: rotate(40deg);
}

.arrow-right .bottom-point {
    top: 8px;
    right: 0;
    transform-origin: bottom right;
    transform: rotate(-40deg);
}

.arrow-left .top-point {
    bottom: 7px;
    left: 0;
    transform-origin: top left;
    transform: rotate(-40deg);
}

.arrow-left .bottom-point {
    top: 8px;
    left: 0;
    transform-origin: bottom left;
    transform: rotate(40deg);
}