:root {
    --ymaps3x0-resize-control-color: #122db2;
    --ymaps3x0-resize-control-line-width: 2px;
    --ymaps3x0-resize-control-size: 18px;
}

.ymaps3x0-resize {
    border: inherit;
}

.ymaps3x0-resize.active {
    border: 1px solid var(--ymaps3x0-resize-control-color);
}

.ymaps3x0-resize-control {
    position: absolute;
    transition: opacity 0.2s;
    border-radius: 2px;
}

.ymaps3x0-resize-control.both {
    bottom: 0;
    right: 0;
    border-right: var(--ymaps3x0-resize-control-line-width) solid var(--ymaps3x0-resize-control-color);
    border-bottom: var(--ymaps3x0-resize-control-line-width) solid var(--ymaps3x0-resize-control-color);
    box-sizing: border-box;
    width: var(--ymaps3x0-resize-control-size);
    height: var(--ymaps3x0-resize-control-size);
}

.ymaps3x0-resize-control.vertical {
    bottom: 0;
    right: calc(50% - 6px);
    transform: translateX(-50%);
    background-color: var(--ymaps3x0-resize-control-color);
    width: var(--ymaps3x0-resize-control-size);
    height: var(--ymaps3x0-resize-control-line-width);
}

.ymaps3x0-resize-control.horizontal {
    bottom: calc(50% - 6px);
    right: 0;
    background-color: var(--ymaps3x0-resize-control-color);
    width: var(--ymaps3x0-resize-control-line-width);
    height: var(--ymaps3x0-resize-control-size);
}

.ymaps3x0-resize-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    height: 6px;
    width: 6px;
    position: absolute;
    opacity: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiMyRTRDRTUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEuMzg3IDUuNTMzYy0uMzUyLjIxLS42MzcuMDQ3LS42MzctLjM2M1YuODNjMC0uNDExLjI4Ny0uNTczLjYzNy0uMzYzbDMuNiAyLjE1MmMuMzUxLjIxLjM1LjU1MiAwIC43NjJ6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
}

.ymaps3x0-resize-arrow.vertical.bottom {
    left: 50%;
    top: 4px;
    transform: translateY(50%);
    rotate: 90deg;
}

.ymaps3x0-resize-arrow.vertical.top {
    left: 50%;
    bottom: 4px;
    transform: translateY(-50%);
    rotate: -90deg;
}

.ymaps3x0-resize-arrow.horizontal.right {
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}
.ymaps3x0-resize-arrow.horizontal.left {
    rotate: 180deg;
    right: 4px;
    top: 50%;
    transform: translateY(50%);
}

.ymaps3x0-resize-arrow.both.nw {
    left: -2px;
    top: -2px;
    rotate: 225deg;
}
.ymaps3x0-resize-arrow.both.se {
    right: -8px;
    bottom: -8px;
    rotate: 45deg;
}