refactor: // Disabled
$disabledOpacity: 0.4;

.button {
    &.use-gradient {
        &.yellow {
            // Default State
            $primaryBackgroundColor: transparent;
            $primaryBackgroundGradient: linear-gradient(180deg, #FFE768 2.02%, #F6B737 57.52%, #F48E30 99.78%);
            $primaryBorderColor: #FFBE34;
            $primaryBorderImage: none;
            $primaryColor: #850404;

            $primaryWithIconBackgroundColor: transparent;
            $primaryWithIconBackgroundGradient: linear-gradient(180deg, #FFE768 2.02%, #F6B737 57.52%, #F48E30 99.78%);
            $primaryWithIconBorderColor: #FFBE34;
            $primaryWithIconBorderImage: none;
            $primaryWithIconColor: #850404;

            $secondaryBackgroundColor: #fff;
            $secondaryBackgroundGradient: none;
            $secondaryBorderColor: #FFBE34;
            $secondaryBorderImage: none;
            $secondaryColor: #CD6200;

            $onlyIconBackgroundColor: transparent;
            $onlyIconBackgroundGradient: linear-gradient(180deg, #FFE768 0.27%, #F6B737 57.77%, #F48E30 91.93%);
            $onlyIconBorderColor: transparent;
            $onlyIconBorderImage: linear-gradient(360deg, #FFBC3A -0.62%, #FFC556 100.36%);
            $onlyIconColor: transparent;

            // Active State (On Pressed)
            $primaryBackgroundGradient__active: linear-gradient(180deg, #FEEA91 0.27%, #FAD279 57.77%, #F8B06F 91.93%);

            $primaryWithIconBackgroundGradient__active: linear-gradient(180deg, #FEEA91 0.27%, #FAD279 57.77%, #F8B06F 91.93%);

            $secondaryBorderColor__active: #F9CB73;
            $secondaryColor__active: #DC914D;

            $onlyIconBackgroundGradient__active: linear-gradient(180deg, #FEEA91 0.27%, #FAD279 57.77%, #F8B06F 91.93%);

            &.primary {
                background-color: $primaryBackgroundColor;
                background: $primaryBackgroundGradient;
                border-color: $primaryBorderColor;
                border-image: $primaryBorderImage;
                color: $primaryColor;
            
                &:active {
                    background: $primaryBackgroundGradient__active;
                }
            
                &:disabled {
                    background-color: $primaryBackgroundColor;
                }
            }
            
            &.primary-with-icon {
                background-color: $primaryWithIconBackgroundColor;
                background: $primaryWithIconBackgroundGradient;
                border-color: $primaryWithIconBorderColor;
                border-image: $primaryWithIconBorderImage;
                color: $primaryWithIconColor;
            
                &:active {
                    background-color: $primaryWithIconBackgroundColor;
                }
            
                &:disabled {
                    background-color: $primaryBackgroundColor;
                }
            }
            
            &.secondary {
                background-color: $secondaryBackgroundColor;
                background: $secondaryBackgroundGradient;
                border-color: $secondaryBorderColor;
                border-image: $secondaryBorderImage;
                color: $secondaryColor;
            
                &:active {
                    border-color: $secondaryBorderColor__active;
                    color: $secondaryColor__active;
                }
            
                &:disabled {
                    background-color: $secondaryBackgroundColor;
                }
            }
            
            &.only-icon {
                background-color: $onlyIconBackgroundColor;
                background: $onlyIconBackgroundGradient;
                border-color: $onlyIconBorderColor;
                border-image: $onlyIconBorderImage;
            
                &:active {
                    border-image: $onlyIconBackgroundGradient__active;
                }
            
                &:disabled {
                    background-color: $onlyIconBackgroundColor;
                }
            }
        }

        &.green {
            // Default State
            $primaryBackgroundColor: transparent;
            $primaryBackgroundGradient: linear-gradient(180deg, #71DC19 0.27%, #129F12 57.77%, #0D950D 91.93%);
            $primaryBorderColor: transparent;
            $primaryBorderImage: linear-gradient(360deg, #56B110 -0.62%, #64C916 100.36%);
            $primaryColor: #fff;

            $primaryWithIconBackgroundColor: transparent;
            $primaryWithIconBackgroundGradient: linear-gradient(180deg, #71DC19 0.27%, #129F12 57.77%, #0D950D 91.93%);
            $primaryWithIconBorderColor: transparent;
            $primaryWithIconBorderImage: linear-gradient(360deg, #56B110 -0.62%, #64C916 100.36%);
            $primaryWithIconColor: #fff;

            $secondaryBackgroundColor: #fff;
            $secondaryBackgroundGradient: none;
            $secondaryBorderColor: #169D00;
            $secondaryBorderImage: none;
            $secondaryColor: #169D00;

            $onlyIconBackgroundColor: transparent;
            $onlyIconBackgroundGradient: linear-gradient(180deg, #71DC19 0.27%, #129F12 57.77%, #0D950D 91.93%);
            $onlyIconBorderColor: transparent;
            $onlyIconBorderImage: linear-gradient(360deg, #56B110 -0.62%, #64C916 100.36%);
            $onlyIconColor: #fff;

            // Active State (On Pressed)
            $primaryBackgroundGradient__active: linear-gradient(180deg, #71DC19 0.27%, #129F12 57.77%, #0D950D 91.93%), linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));

            $primaryWithIconBackgroundGradient__active: linear-gradient(180deg, #71DC19 0.27%, #129F12 57.77%, #0D950D 91.93%), linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));

            $secondaryBorderColor__active: #4AC437;
            $secondaryColor__active: #4AC437;

            $onlyIconBackgroundGradient__active: linear-gradient(180deg, #71DC19 0.27%, #129F12 57.77%, #0D950D 91.93%), linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));

            &.primary {
                background-color: $primaryBackgroundColor;
                background: $primaryBackgroundGradient;
                border-color: $primaryBorderColor;
                border-image: $primaryBorderImage;
                color: $primaryColor;
            
                &:active {
                    background: $primaryBackgroundGradient__active;
                }
            
                &:disabled {
                    background-color: $primaryBackgroundColor;
                }
            }
            
            &.primary-with-icon {
                background-color: $primaryWithIconBackgroundColor;
                background: $primaryWithIconBackgroundGradient;
                border-color: $primaryWithIconBorderColor;
                border-image: $primaryWithIconBorderImage;
                color: $primaryWithIconColor;
            
                &:active {
                    background-color: $primaryWithIconBackgroundColor;
                }
            
                &:disabled {
                    background-color: $primaryBackgroundColor;
                }
            }
            
            &.secondary {
                background-color: $secondaryBackgroundColor;
                background: $secondaryBackgroundGradient;
                border-color: $secondaryBorderColor;
                border-image: $secondaryBorderImage;
                color: $secondaryColor;
            
                &:active {
                    border-color: $secondaryBorderColor__active;
                    color: $secondaryColor__active;
                }
            
                &:disabled {
                    background-color: $secondaryBackgroundColor;
                }
            }
            
            &.only-icon {
                background-color: $onlyIconBackgroundColor;
                background: $onlyIconBackgroundGradient;
                border-color: $onlyIconBorderColor;
                border-image: $onlyIconBorderImage;
            
                &:active {
                    border-image: $onlyIconBackgroundGradient__active;
                }
            
                &:disabled {
                    background-color: $onlyIconBackgroundColor;
                }
            }
        }

        // common style
        box-shadow: 0px 2px 5px 0px #20000036;

        &:disabled {
            opacity: $disabledOpacity;

        }
    }
}