/*!
 * AD Weave Design System (ad-buttons.css)
 * Version: 1.0
 * License: GNU General Public License v2.0 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

/* This .css file is used for create buttons classes and standards */

/* --------------------------------------------
/* Table of Content
/* --------------------------------------------
   Button with Default Structure
   Button with Sizing Variations
   Button with Solid Background Style
   Button with Icon Variations
   Button with Block
   Button with Border Outline Style
   Button with Flat Style
   Button with Link Style
   Button with FAB Style
   Button with FAB Animate Style
*/

/* ============================================
/* AD Button Default Structure .ad-btn prefix
============================================ */
.ad-btn {
    display: inline-block;
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    letter-spacing: var(--btn-letter-spacing);
    color: var(--btn-font-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--btn-bg-transparent);
    border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color-transparent);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    -moz-border-radius: var(--btn-border-radius-lg);
    -webkit-border-radius: var(--btn-border-radius-lg);
    border-radius: var(--btn-border-radius-lg);
    transition: var(--btn-transition);
    -webkit-transition: var(--btn-transition);
    -moz-transition: var(--btn-transition);
    -ms-transition: var(--btn-transition);
    -o-transition: var(--btn-transition);
}
.ad-btn-block {
    width:100%;
    display:block;
}

/* ============================================
/* AD Button With Sizing Variations
============================================ */
.ad-btn-sm {
    padding:var(--btn-padding-y-sm) 13px var(--btn-padding-y-sm) var(--btn-padding-y-sm);
    font-size:var(--btn-font-size-sm);
    line-height:var(--btn-line-height-sm);
    -moz-border-radius: var(--btn-border-radius-sm);
    -webkit-border-radius: var(--btn-border-radius-sm);
    border-radius: var(--btn-border-radius-sm);
}

/* ============================================
/* AD Button With Solid Background Style
============================================ */
.ad-btn.ad-btn-primary {
    background-color:var(--cc-button-background-color);
    color:var(--cc-button-color);
    border-color:var(--cc-button-background-color);
}
.ad-btn.ad-btn-primary:hover {
    background-color:var(--cc-button-background-color-dark-hover);
    border-color:var(--cc-button-background-color-dark-hover);
}
.ad-btn.ad-btn-primary:focus,
.ad-btn.ad-btn-primary:active {
    background-color:var(--cc-button-background-color-dark-active);
    border-color:var(--cc-button-background-color-dark-active);
}

/* ============================================
/* AD Button With Icon Style
============================================ */
.ad-btn-icon {
    display:inline-flex;
    align-items:center;
}
.ad-btn-icon i,
.ad-btn-icon .ad-icon,
.ad-btn-icon .ad-img {
    margin-right:var(--btn-icon-margin-right);
}

/* ============================================
/* AD Button With Flat Text Color Style
============================================ */
.ad-btn-flat:hover,
.ad-btn-flat:focus,
.ad-btn-flat:active {
    background-color:var(--cc-form-element-disabled-color);
    border-color:transparent;
}

/* Button Primary */
.ad-btn-flat.ad-btn-primary {
    background-color:transparent;
    border-color:transparent;
    color:var(--cc-textbtn-color);
}
.ad-btn-flat.ad-btn-primary:hover,
.ad-btn-flat.ad-btn-primary:focus,
.ad-btn-flat.ad-btn-primary:active {
    background-color:var(--cc-form-element-disabled-color);
    color:var(--cc-textbtn-color);
    border-color:transparent;
}

/* ============================================
/* AD Button With Text Link Style
============================================ */
.ad-btn-link {
    padding:0;
}
.ad-btn-link:hover,
.ad-btn-link:focus,
.ad-btn-link:active {
    background-color:transparent;
    border-color:transparent;
}

/* Button Link Dark */
.ad-btn-link.ad-btn-dark {
    background-color:transparent;
    border-color:transparent;
    color:rgba(var(--cc-black-alpha), 0.67);
}
.ad-btn-link.ad-btn-dark:hover,
.ad-btn-link.ad-btn-dark:focus,
.ad-btn-link.ad-btn-dark:active {
    color:rgba(var(--cc-black-alpha), 0.87);
    background-color:transparent;
    border-color:transparent;
}

/* ============================================
/* AD Button With FAB Style
============================================ */
.ad-btn-fab {
    width: var(--btn-fab-size-sm);
    height: var(--btn-fab-size-sm);
    min-width:var(--btn-fab-size-sm);
    line-height: var(--btn-fab-size-sm);
    -moz-border-radius: var(--btn-fab-border-radius);
    -webkit-border-radius: var(--btn-fab-border-radius);
    border-radius: var(--btn-fab-border-radius);
    text-align:center;
    padding:0;
    -moz-box-shadow: var(--btn-fab-box-shadow);
    -webkit-box-shadow: var(--btn-fab-box-shadow);
    box-shadow: var(--btn-fab-box-shadow);
    display:none;
}
.ad-btn-fab i, .ad-btn-fab span
{
    line-height:calc(var(--btn-fab-size-sm) - var(--btn-border-width * 2));
}
.ad-btn-fab:hover {
    -moz-box-shadow: var(--btn-fab-box-shadow);
    -webkit-box-shadow: var(--btn-fab-box-shadow);
    box-shadow: var(--btn-fab-box-shadow);
}
.ad-btn-fab:hover,
.ad-btn-fab:focus,
.ad-btn-fab:active {
    -moz-box-shadow: var(--btn-fab-box-shadow);
    -webkit-box-shadow: var(--btn-fab-box-shadow);
    box-shadow: var(--btn-fab-box-shadow);
}

/* Button Primary */
.ad-btn-fab.ad-btn-primary {
    background-color:var(--cc-button-background-color);
    color:var(--btn-font-color);
}
.ad-btn-fab.ad-btn-primary:hover {
    background-color:var(--cc-button-background-color-dark-hover);
}
.ad-btn-fab.ad-btn-primary:focus,
.ad-btn-fab.ad-btn-primary:active {
    background-color:var(--cc-button-background-color-dark-active);
}

/* Button Light */
.ad-btn-fab.ad-btn-light {
    background-color:var(--cc-background-color);
    color:var(--btn-font-color);
}
.ad-btn-fab.ad-btn-light:hover {
    background-color:var(--cc-background-color);
    -moz-box-shadow: 0 11px 15px -7px rgba(var(--cc-black-alpha), 0.2), 0 9px 46px 8px rgba(var(--cc-black-alpha), 0.12),
    0 24px 38px 3px rgba(var(--cc-black-alpha), 0.14);
    -webkit-box-shadow: 0 11px 15px -7px rgba(var(--cc-black-alpha), 0.2), 0 9px 46px 8px rgba(var(--cc-black-alpha), 0.12),
    0 24px 38px 3px rgba(var(--cc-black-alpha), 0.14);
    box-shadow: 0 11px 15px -7px rgba(var(--cc-black-alpha), 0.2), 0 9px 46px 8px rgba(var(--cc-black-alpha), 0.12),
    0 24px 38px 3px rgba(var(--cc-black-alpha), 0.14);
}
.ad-btn-fab.ad-btn-light:focus,
.ad-btn-fab.ad-btn-light:active {
    background-color:var(--cc-background-color);
    -moz-box-shadow: 0 11px 15px -7px rgba(var(--cc-black-alpha), 0.2), 0 9px 46px 8px rgba(var(--cc-black-alpha), 0.12),
    0 24px 38px 3px rgba(var(--cc-black-alpha), 0.14);
    -webkit-box-shadow: 0 11px 15px -7px rgba(var(--cc-black-alpha), 0.2), 0 9px 46px 8px rgba(var(--cc-black-alpha), 0.12),
    0 24px 38px 3px rgba(var(--cc-black-alpha), 0.14);
    box-shadow: 0 11px 15px -7px rgba(var(--cc-black-alpha), 0.2), 0 9px 46px 8px rgba(var(--cc-black-alpha), 0.12),
    0 24px 38px 3px rgba(var(--cc-black-alpha), 0.14);
}

/* ============================================
/* AD Button With FAB Animate Style
============================================ */
.ad-floating-action {
    bottom: var(--spacer30);
    position: fixed;
    right: var(--spacer30);
    z-index: var(--btn-fab-z-index);
}
.ad-floating-action:hover .ad-floating-action-btn {
    opacity: 1;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    transform: none;
    position: relative;
    bottom: auto;
    overflow: hidden;
}
.ad-floating-action:hover .ad-floating-action-btn:before {
    opacity: 1;
}
.ad-floating-action-btn.ad-btn-fab:hover {
    overflow: visible;
}
.ad-floating-hidden {
    display: none;
}

/* Floating Animate Button Items */
.ad-floating-action-btn {
    display: block;
    position: relative;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    -moz-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    -ms-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    -o-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    overflow:hidden;
}
.ad-floating-action-btn:hover,
.ad-floating-action-btn:focus,
.ad-floating-action-btn:active {
    overflow:visible;
    -moz-box-shadow: 0 24px 24px 0 rgba(var(--cc-black-alpha), 0.2);
    -webkit-box-shadow: 0 24px 24px 0 rgba(var(--cc-black-alpha), 0.2);
    box-shadow: 0 24px 24px 0 rgba(var(--cc-black-alpha), 0.2);
}
.ad-floating-action-btn:not(:last-child) {
    opacity: 0;
    transform: translateY(20px) scale(0.3);
    -ms-transform: translateY(20px) scale(0.3);
    margin-bottom: 0.9375rem;
    position: absolute;
    bottom: 0;
}
.ad-floating-action-btn:not(:last-child):nth-last-child(1) {
    transition-delay: 50ms;
}
.ad-floating-action-btn:not(:last-child):nth-last-child(2) {
    transition-delay: 100ms;
}
.ad-floating-action-btn:not(:last-child):nth-last-child(3) {
    transition-delay: 150ms;
}
.ad-floating-action-btn:not(:last-child):nth-last-child(4) {
    transition-delay: 200ms;
}
.ad-floating-action-btn:not(:last-child):nth-last-child(5) {
    transition-delay: 250ms;
}
.ad-floating-action-btn:not(:last-child):nth-last-child(6) {
    transition-delay: 300ms;
}

/* Floating Animate Tooltip */
.ad-floating-action-btn:before {
    bottom: auto;
    content: attr(data-title);
    opacity: 0;
    position: absolute;
    right: 100%;
    transition: var(--btn-transition);
    white-space: nowrap;
    background-color: transparent;
    padding: 0;
    border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    color: var(--cc-text-color);
    font-size: var(--cc-font-size-l-large);
    margin-right: var(--spacer);
    display: inline-block;
}