.magnify-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    svg {
        #arrow1 {
            transform: rotate(180deg);
            transform-origin: calc(29.167% + 4px) calc(70.833% + 4px); // account for path offset in the svg itself
        }
        #arrow2 {
            transform: rotate(-180deg);
            transform-origin: calc(70.833% + 4px) calc(29.167% + 4px);
        }
        #arrow1,
        #arrow2 {
            transition: transform 300ms ease-in;
        }
    }
    &.enabled {
        svg {
            #arrow1,
            #arrow2 {
                transform: rotate(0deg);
            }
        }
    }
}

.prefers-reduced-motion {
    .magnify-icon svg {
        #arrow1,
        #arrow2 {
            transition: none;
        }
    }
}