/*--------------------------------------------------------------
  >> : Buttons
--------------------------------------------------------------*/
[data-section] .button {
    margin-top: 1rem;
}

.button {
    display: inline-flex;
    position: relative;
    padding: 15px 20px;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    align-items: center;
    overflow: hidden;
    background: var(--color-blue);
    color: var(--color-white);
    border-radius: 50px;
    border: none;
}

.button:hover {
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    color: var(--color-white);
    
}

.button svg {
    margin-left: 10px;
    width: 20px;
}

.button path {
    stroke: var(--color-blue);
}

.button:disabled,
.btn-disabled {
    background: grey !important;
    opacity: 0.4 !important;
    pointer-events: none;
    color: #fff;
}

.frontend .btn {
  padding:18px 22px;
}

.backend .button {
  padding: 10px 15px;
}

/*--------------------------------------------------------------
  >> : Button Colours
--------------------------------------------------------------*/

[data-section] .button-dark,
[data-section] .btn-dark {
  background:#000;
  color: #fff;
}

[data-section] .button-dark:hover,
[data-section] .btn-dark:hover {
  background: var(--color-blue);
}

[data-section] .button-outline,
[data-section] .btn-outline {
  background:transparent;
  color:#000;
  border:1px solid #cecece;
}

[data-section] .button-outline:hover,
[data-section] .btn-outline {
    background: var(--color-blue);
    color: #fff;
    border:1px solid var(--color-blue);
}

[data-section] .button-blue,
[data-section] .btn-blue {
  background:var(--color-blue);
  color: #fff;
}