/*
File: buttons.css
This contains overrides for buttons
*/

/*
SIDEBAR BUTTON OVERRIDE
*/

#rf-body #sidebar .wp-element-button {
    color: #f2f2f2 !important;
    border-color: #e73636 !important;
    background-color: #e73636 !important;
}

/*
BASIC BUTTON STYLES
*/

#rf-body .rf-button,
#rf-body .et_pb_button,
#rf-body .gform_button,
#rf-body .woocommerce-button,
#rf-body .button,
#rf-body .cwgstock_button {
    /* Button Structure */
    display: inline-block;
    position: relative;
    line-height: var(--line-height) !important;
    padding: var(--size-small) var(--size-large) !important;
    
    /* Button Coloring */
    color: var(--color-font-inverse);
    background-color: transparent !important;
    
    /* Button Typography */
    font-family: var(--font-interactive);
    font-size: 1.25rem;
    font-weight: bold;
    
    /* Misc Overrides */
    text-shadow: none;
    cursor: pointer;
    transition: var(--transition-standard);
}

/* Button background shape */
#rf-body .rf-button::before,
#rf-body .et_pb_button::before,
#rf-body .gform_button::before,
#rf-body .woocommerce-button::before,
#rf-body .button::before,
#rf-body .cwgstock_button::before {
    content: "";
    opacity: 1;
    font-size: inherit;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    background-image: url("https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-button-background-1.svg");
    background-size: 100% 100%;
    transition: var(--transition-bounce);
}

#rf-body .rf-button::after,
#rf-body .et_pb_button::after,
#rf-body .gform_button::after,
#rf-body .woocommerce-button::after,
#rf-body .button::after,
#rf-body .cwgstock_button::after {
    content: none;
}

/* Hover Overrides */
#rf-body .rf-button:hover,
#rf-body .et_pb_button:hover,
#rf-body .gform_button:hover,
#rf-body .woocommerce-button:hover,
#rf-body .button:hover,
#rf-body .cwgstock_button:hover {
    color: var(--color-2);
}

#rf-body .rf-button:hover::before,
#rf-body .et_pb_button:hover::before,
#rf-body .gform_button:hover::before,
#rf-body .woocommerce-button:hover::before,
#rf-body .button:hover::before,
#rf-body .cwgstock_button:hover::before {
    transform: skew(-1deg, 2deg) scale(1.05, 1.1);
}

@media (max-width: 767px) {
    #rf-body .rf-button,
    #rf-body .et_pb_button,
    #rf-body .gform_button,
    #rf-body .woocommerce-button,
    #rf-body .button,
    #rf-body .cwgstock_button {
        font-size: 1rem;
    }
}

/*
OUTLINE BUTTONS
*/

#rf-body .rf-button-outline::before {
    background-image: url("https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-button-background-outline.svg");
}

#rf-body .rf-button-outline.rf-color-1 {
    color: var(--color-1);
}

#rf-body .rf-button-outline.rf-color-3 {
    color: var(--color-3);
}

#rf-body .rf-button-outline.rf-color-3::before {
    filter: brightness(0) saturate(100%) invert(31%) sepia(42%) saturate(443%) hue-rotate(154deg) brightness(96%) contrast(95%);
}

#rf-body .rf-button-outline.rf-color-4 {
    color: var(--color-4);
}

#rf-body .rf-button-outline.rf-color-4::before {
    filter: brightness(0) saturate(100%) invert(60%) sepia(71%) saturate(307%) hue-rotate(71deg) brightness(92%) contrast(85%);
}

#rf-body .rf-button-outline.rf-color-5 {
    color: var(--color-5);
}

#rf-body .rf-button-outline.rf-color-5::before {
    filter: brightness(0) saturate(100%) invert(31%) sepia(59%) saturate(376%) hue-rotate(272deg) brightness(92%) contrast(98%);
}

#rf-body .rf-button-outline.rf-color-font-1 {
    color: var(--color-font-1);
}

#rf-body .rf-button-outline.rf-color-font-1::before {
    filter: brightness(0) saturate(100%) invert(12%) sepia(5%) saturate(0%) hue-rotate(197deg) brightness(95%) contrast(102%);
}

#rf-body .et_pb_button.rf-color-6::before,
#rf-body .button.rf-color-6::before {
    filter: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(4746%) hue-rotate(340deg) brightness(92%) contrast(94%);
}

/* 
MULTI-BUTTON LAYOUTS
*/

#rf-body .et_pb_button + .et_pb_button {
    margin-left: var(--size-medium);
}

#rf-body p + .button,
#rf-body p + .et_pb_button {
    margin-top: var(--line-height);
}

/*
ICON BUTTONS
*/

#rf-body .rf-icon-button,
#rf-body .rf-palette-button,
#rf-body .rf-button-alt {
    font-family: var(--font-interactive);
    font-size: 1rem;
    font-weight: bold;
    display: inline-block;
    color: var(--color-1);
    line-height: var(--line-height);
    background: transparent;
    position: relative;
    transition: var(--transition-standard);
    padding: 0 var(--size-small) 0 2.25rem;
}

/* Icon styling */
#rf-body .rf-icon-button::before,
#rf-body .rf-palette-button::before,
#rf-body .rf-button-alt::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    content: "\f067";
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: var(--size-medium);
    height: var(--size-medium);
    left: 0;
    top: 0;
    font-size: 1rem;
    text-align: center;
    background-image: none;
}

/* Hover Styles */
#rf-body .rf-icon-button:hover,
#rf-body .rf-palette-button:hover,
#rf-body .rf-button-alt:hover {
    color: var(--color-2) !important;
}

/*
PALETTE BUTTONS
*/

#rf-body .rf-palette-button,
#rf-body .rf-button-alt {
    padding: var(--size-xsmall) var(--size-small) var(--size-xsmall) var(--size-large) !important;
}

#rf-body .rf-palette-button::before,
#rf-body .rf-button-alt::before {
    background: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/Palette.svg);
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    padding-left: var(--size-xsmall);
    color: var(--color-font-inverse);
    transition: var(--transition-standard);
}

#rf-body .rf-palette-button:hover::before,
#rf-body .rf-button-alt:hover::before {
    color: var(--color-2);
    transform: none;
}

/* Setting individual icons */
#rf-body .rf-icon-button.fa-helping-hands::before,
#rf-body .rf-palette-button.fa-helping-hands::before {
    content: "\f4c4";
}

#rf-body .rf-icon-button.fa-question-circle::before,
#rf-body .rf-palette-button.fa-question-circle::before {
    content: "\f059";
}

#rf-body .rf-icon-button.fa-edit::before,
#rf-body .rf-palette-button.fa-edit::before {
    content: "\f044";
}

#rf-body .rf-icon-button.fa-phone-alt::before,
#rf-body .rf-palette-button.fa-phone-alt::before {
    content: "\f879";
}

#rf-body .rf-icon-button.fa-envelope::before,
#rf-body .rf-palette-button.fa-envelope::before {
    content: "\f0e0";
}

#rf-body .rf-icon-button.fa-question::before,
#rf-body .rf-palette-button.fa-question::before {
    content: "\f128";
}