/* ==========================================================
   BASE BUTTON
   ========================================================== */

.btn {

    min-width: 90px;
    height: 26px;

    padding: 0 16px;

    border: 1px solid #d1d1d6;
    border-radius: 8px;

    background: #ffffff;
    color: #1d1d1f;

    font-size: 14px;
    font-weight: 500;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* ==========================================================
   DEFAULT STATES
   ========================================================== */

.btn:hover:not(:disabled):not(.btn-save):not(.btn-add):not(.btn-delete):not(.btn-discard) {

    background: #f5f5f7;
}

.btn:active:not(:disabled):not(.btn-save):not(.btn-add):not(.btn-delete):not(.btn-discard) {

    background: #ebebed;
}

.btn:focus {

    outline: none;

    box-shadow: 0 0 0 3px rgba(0,122,255,.20);
}

.btn:disabled {

    background: #f2f2f7;

    border-color: #d1d1d6;

    color: #8e8e93;

    cursor: not-allowed;

    opacity: .7;
}


/* ==========================================================
   ADD
   ========================================================== */

.btn-add {

    background: #007AFF;

    border-color: #007AFF;

    color: white;
}

.btn-add:hover {

    background: #006BE8;

    border-color: #006BE8;
}

.btn-add:active {

    background: #005BD1;
}


/* ==========================================================
   SAVE
   ========================================================== */

.btn-save {

    background: #007AFF;

    border-color: #007AFF;

    color: white;
}

.btn-save:hover {

    background: #006BE8;

    border-color: #006BE8;
}

.btn-save:active {

    background: #005BD1;
}


/* ==========================================================
   DELETE
   ========================================================== */

.btn-delete {

    background: #FF3B30;

    border-color: #FF3B30;

    color: white;
}

.btn-delete:hover {

    background: #E0352B;

    border-color: #E0352B;
}

.btn-delete:active {

    background: #C92D24;
}


/* ==========================================================
   BACK
   ========================================================== */

.btn-back {

    background: #ffffff;

    color: #1d1d1f;
}

.btn-back:hover {

    background: #F5F5F7;
}

.btn-back:active {

    background: #EBEBED;
}


/* ==========================================================
   DISCARD
   ========================================================== */

.btn-discard {

    background: #FF9500;

    border-color: #FF9500;

    color: white;
}

.btn-discard:hover {

    background: #E68600;

    border-color: #E68600;
}

.btn-discard:active {

    background: #CC7600;
}


/* ==========================================================
   ACTION BAR
   ========================================================== */

.action-buttons {
    display: flex;
    align-items: center;
    margin-top: 20px;
}


/* ==========================================================
   ACTION GROUPS
   ========================================================== */

.action-left,
.action-center,
.action-right {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================================
   LEFT GROUP
   ========================================================== */

.action-left {
    justify-content: flex-start;
}


/* ==========================================================
   CENTER GROUP
   ========================================================== */

.action-center {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}


/* ==========================================================
   RIGHT GROUP
   ========================================================== */

.action-right {
    margin-left: auto;
    justify-content: flex-end;
}


/* ==========================================================
   ACTION GROUPS
   ========================================================== */

.action-left,
.action-center,
.action-right {

    display: flex;

    align-items: center;

    gap: 10px;
}


/* ==========================================================
   CENTER GROUP
   ========================================================== */

.action-center {

    flex: 1;

    justify-content: center;
}


/* ==========================================================
   RIGHT GROUP
   ========================================================== */

.action-right {

    justify-content: flex-end;
}