/*
File: jts-buttons.css (converted from _buttons.scss)
This should contain overrides for buttons
*/

/*
INDIVIDUAL BUTTON STYLES
*/

/* BASIC BUTTON */
#rf-body .et_pb_button, /* Divi button */
#rf-body .gform_button, /* Gravity Forms button */
#rf-body [type='submit'] /* Anything with "submit" type */
{
    /* Button Structure */
    display: inline-block;
    text-decoration: none;
    line-height: var(--line-height) !important;
    padding: var(--size-small) var(--size-medium) !important;
    border: 2px solid #01555B;
    
    /* Button Coloring */
    color: var(--color-1);
    background-color: transparent;
    
    /* Button Typography */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Josefin Sans';
    
    /* Misc Overrides */
    text-shadow: none; /* override Divi default */
    cursor: pointer; /* ensure it feels like a button */
    
    /* Setup for icon positioning */
    position: relative;
}

/* Default Before Icon - Boat */
#rf-body .et_pb_button::before,
#rf-body .gform_button::before,
#rf-body [type='submit']::before {
    content: '';
    position: absolute;
    background-image: url("https://www.jtsonthekeysresort.com/wp-content/uploads/2020/11/boat.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 66px;
    height: 66px;
    left: -75%;
    top: 0%;
}

/* Button Hover States */
#rf-body .et_pb_button:hover,
#rf-body .gform_button:hover,
#rf-body [type='submit']:hover {
    border: 2px solid #C7932D;
    transition: var(--transition-standard);
    color: var(--color-3);
}

/* No Icon Button */
#rf-body .et_pb_button.no-icon-button::before,
#rf-body .gform_button.no-icon-button::before,
#rf-body [type='submit'].no-icon-button::before {
    content: none;
    background-image: none;
    width: 66px;
    height: 66px;
    left: 0%;
    top: 0%;
}

/* Drink Icon Button */
#rf-body .et_pb_button.drink-icon-button::before,
#rf-body .gform_button.drink-icon-button::before,
#rf-body [type='submit'].drink-icon-button::before {
    background-image: url("https://www.jtsonthekeysresort.com/wp-content/uploads/2020/11/drink.svg");
    width: 66px;
    height: 66px;
    left: -30%;
    top: 0%;
}

/* Cards Icon Button */
#rf-body .et_pb_button.cards-icon-button::before,
#rf-body .gform_button.cards-icon-button::before,
#rf-body [type='submit'].cards-icon-button::before {
    background-image: url("https://www.jtsonthekeysresort.com/wp-content/uploads/2020/11/cards.svg");
    width: 66px;
    height: 66px;
    left: -30%;
    top: 0%;
}

/* Dirtbike Icon Button */
#rf-body .et_pb_button.dirtbike-icon-button::before,
#rf-body .gform_button.dirtbike-icon-button::before,
#rf-body [type='submit'].dirtbike-icon-button::before {
    background-image: url("https://www.jtsonthekeysresort.com/wp-content/uploads/2020/11/dirtbike.svg");
    width: 66px;
    height: 66px;
    left: -30%;
    top: 0%;
}

/* Offroad Icon Button */
#rf-body .et_pb_button.offroad-icon-button::before,
#rf-body .gform_button.offroad-icon-button::before,
#rf-body [type='submit'].offroad-icon-button::before {
    background-image: url("https://www.jtsonthekeysresort.com/wp-content/uploads/2020/11/truck.svg");
    width: 66px;
    height: 66px;
    left: -30%;
    top: 0%;
}

/* Canoe Icon Button */
#rf-body .et_pb_button.canoe-icon-button::before,
#rf-body .gform_button.canoe-icon-button::before,
#rf-body [type='submit'].canoe-icon-button::before {
    background-image: url("https://www.jtsonthekeysresort.com/wp-content/uploads/2020/11/canoe.svg");
    width: 66px;
    height: 66px;
    left: -30%;
    top: 0%;
}

/* Jetski Icon Button */
#rf-body .et_pb_button.jetski-icon-button::before,
#rf-body .gform_button.jetski-icon-button::before,
#rf-body [type='submit'].jetski-icon-button::before {
    background-image: url("https://www.jtsonthekeysresort.com/wp-content/uploads/2020/11/jetski.svg");
    width: 66px;
    height: 66px;
    left: -30%;
    top: 0%;
}

/* Gravity Forms Button Padding Override */
#rf-body .gform_button {
    padding: initial !important;
}

/* ALTERNATIVE BUTTONS - Add styles as needed */
#rf-body .rf-button-secondary {
    /* Define secondary button styles here */
}

#rf-body .rf-button-deemphasized {
    /* Define deemphasized button styles here */
}

/* 
MULTI-BUTTON LAYOUTS
*/

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