/* ==========================================================
   ROCK YOUR TIME®
   BUTTONS
========================================================== */

/* ----------------------------------------------------------
   BASE BUTTON
---------------------------------------------------------- */

.ryt-button,
.ryt-primary-button,
.ryt-secondary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 26px;

    border:none;

    border-radius:var(--ryt-radius-md);

    cursor:pointer;

    font-family:var(--ryt-font-heading);

    font-size:var(--ryt-font-md);

    font-weight:600;

    text-decoration:none;

    transition:all var(--ryt-speed-normal);

    white-space:nowrap;

}

/* ----------------------------------------------------------
   PRIMARY
---------------------------------------------------------- */

.ryt-primary-button{

    background:var(--ryt-gradient-primary);

    color:white;

    box-shadow:var(--ryt-shadow-sm);

}

.ryt-primary-button:hover{

    color:white;

    transform:translateY(-2px);

    box-shadow:var(--ryt-shadow-md);

}

/* ----------------------------------------------------------
   SECONDARY
---------------------------------------------------------- */

.ryt-secondary-button{

    background:white;

    color:var(--ryt-primary);

    border:2px solid var(--ryt-primary);

}

.ryt-secondary-button:hover{

    background:var(--ryt-primary);

    color:white;

}

/* ----------------------------------------------------------
   OUTLINE
---------------------------------------------------------- */

.ryt-outline-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 26px;

    border:2px solid var(--ryt-border);

    border-radius:var(--ryt-radius-md);

    background:white;

    color:var(--ryt-text);

    font-weight:600;

    transition:all var(--ryt-speed-normal);

    text-decoration:none;

}

.ryt-outline-button:hover{

    border-color:var(--ryt-primary);

    color:var(--ryt-primary);

}

/* ----------------------------------------------------------
   SUCCESS
---------------------------------------------------------- */

.ryt-success-button{

    background:var(--ryt-success);

    color:white;

}

.ryt-success-button:hover{

    color:white;

    transform:translateY(-2px);

}

/* ----------------------------------------------------------
   DANGER
---------------------------------------------------------- */

.ryt-danger-button{

    background:var(--ryt-danger);

    color:white;

}

.ryt-danger-button:hover{

    color:white;

    transform:translateY(-2px);

}

/* ----------------------------------------------------------
   SMALL
---------------------------------------------------------- */

.ryt-button-sm{

    padding:10px 18px;

    font-size:var(--ryt-font-sm);

}

/* ----------------------------------------------------------
   LARGE
---------------------------------------------------------- */

.ryt-button-lg{

    padding:18px 36px;

    font-size:var(--ryt-font-lg);

}

/* ----------------------------------------------------------
   FULL WIDTH
---------------------------------------------------------- */

.ryt-button-block{

    display:flex;

    width:100%;

}

/* ----------------------------------------------------------
   DISABLED
---------------------------------------------------------- */

.ryt-button:disabled,
.ryt-primary-button:disabled,
.ryt-secondary-button:disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none;

}

/* ----------------------------------------------------------
   ICONS
---------------------------------------------------------- */

.ryt-button-icon{

    font-size:1.15rem;

    line-height:1;

}