Untitled

.fnd-btn {
    appearance: none;
    border: 0px;
    box-shadow: none;
    line-height: 1;
    transition: all .2s;
    display: inline-block;

    font-size: var(--fnd-btn-fontSize);
    font-weight: var(--fnd-btn-fontWeight);

    width: var(--fnd-btn-width);
    height: var(--fnd-btn-height);
    background-color: var(--fnd-btn-bg);
    color: var(--fnd-btn-textColor);
    border: 1px solid var(--fnd-btn-borderColor);
    border-radius: var(--fnd-btn-radius);
    padding: 0 var(--fnd-btn-xPadding);
    &__full {
        display: block !important;
        width: 100% !important;
    }
    &__wrapper {
        height: 100%;
    }

    
    svg {
        width: var(--fnd-btn-icon-width);
        height: var(--fnd-btn-icon-height);
        object-fit: contain;
        display: block;
        transform: rotate(var(--fnd-icon-rotate));
        transform-origin: center;
        path {
            stroke: var(--fnd-btn-icon-stroke);
            fill: var(--fnd-btn-icon-fill);
        }
    }

    &:hover {
        background-color: var(--fnd-btn-bg-hover);
        color: var(--fnd-btn-textColor-hover);
        border-color: var(--fnd-btn-borderColor-hover);
        svg {
            path {
                stroke: var(--fnd-btn-icon-stroke-hover, var(--fnd-btn-icon-stroke));
                fill: var(--fnd-btn-icon-fill-hover, var(--fnd-btn-icon-fill));
            }
        }
    }

    
    &:disabled {
        filter: grayscale(1);
        opacity: 0.5;
        user-select: none;
        pointer-events: none;
    }
}