.cross-icon {
    position: relative;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
}

.cross-icon:before {
    content: '';
    position: absolute;
    top: 14px;
    width: 30px;
    height: 2px;
    background-color: #000000;
    transform: rotate(45deg);
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;

}

.cross-icon:after {
    content: '';
    position: absolute;
    top: 14px;
    width: 30px;
    height: 2px;
    background-color:#000000;
    transform: rotate(-45deg);

    left:0;
    right:0;

    margin-left: auto;
    margin-right: auto;

}
.plus {
    position: relative;
    width:20px;
    height:20px;
    background: #ffffff;
}

.plus:before,
.plus:after {
    content: "";
    position:absolute;
    background:var(--color-black);
}

.plus:before {
    left:50%;
    top:4px;
    bottom:4px;
    width:2px;
    transform:translateX(-50%);
}

.plus:after {
    top:50%;
    left:4px;
    right:4px;
    height:2px;
    transform:translateY(-50%);
}
.minus {
    position: relative;
    width:20px;
    height:20px;
    background: #ffffff;
}

.minus:after {
    content: "";
    position:absolute;
    background:var(--color-black);
}


.minus:after {
    top:50%;
    left:4px;
    right:4px;
    height:2px;
    transform:translateY(-50%);
}

.arrow {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 2px;
    background-color: #000000;
}

.arrow::after, .arrow::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    right: -8px;
    background-color: #000000;
}

.arrow::after {
    top: -12px;
    transform: rotate(45deg);
}

.arrow::before {
    top: 12px;
    transform: rotate(-45deg);
}