/* ==========================================================
   DAMIOLINK UI
   Password Manager compatibility layer
   ========================================================== */


/* ----------------------------------------------------------
   SHARED BUTTON GEOMETRY
   ---------------------------------------------------------- */

.primary-button,
.pm-secondary-button,
.pm-danger-button,
.mini-button {

    min-height: var(--dl-button-height);

    padding: 9px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius:
        var(--dl-radius-button) !important;

    font-family:
        var(--dl-font);

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--dl-transition),
        border-color var(--dl-transition),
        color var(--dl-transition),
        box-shadow var(--dl-transition),
        transform var(--dl-transition) !important;
}


.primary-button:hover,
.pm-secondary-button:hover,
.pm-danger-button:hover,
.mini-button:hover {

    transform:
        translateY(-1px);
}


.primary-button:active,
.pm-secondary-button:active,
.pm-danger-button:active,
.mini-button:active {

    transform:
        translateY(0);
}


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

.primary-button {

    color:
        var(--dl-primary-text) !important;

    background:
        linear-gradient(
            180deg,
            #3298ff 0%,
            var(--dl-primary) 100%
        ) !important;

    border:
        1px solid
        rgba(73, 158, 247, .65) !important;

    box-shadow:
        0 5px 16px
        rgba(15, 105, 213, .20) !important;
}


.primary-button:hover {

    background:
        linear-gradient(
            180deg,
            #42a2ff 0%,
            var(--dl-primary-hover) 100%
        ) !important;

    box-shadow:
        0 8px 22px
        rgba(15, 105, 213, .27) !important;
}


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

.pm-secondary-button {

    color:
        var(--dl-secondary-text) !important;

    background:
        var(--dl-secondary-bg) !important;

    border:
        1px solid
        var(--dl-secondary-border) !important;

    box-shadow:
        none !important;
}


.pm-secondary-button:hover {

    color:
        var(--dl-text) !important;

    background:
        var(--dl-secondary-hover) !important;

    border-color:
        var(--dl-border-strong) !important;
}


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

.pm-danger-button {

    color:
        var(--dl-danger-text) !important;

    background:
        var(--dl-danger-bg) !important;

    border:
        1px solid
        var(--dl-danger-border) !important;

    box-shadow:
        none !important;
}


.pm-danger-button:hover {

    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #e54855,
            var(--dl-danger)
        ) !important;

    border-color:
        var(--dl-danger) !important;

    box-shadow:
        0 6px 18px
        rgba(217,45,58,.20) !important;
}


/* ----------------------------------------------------------
   MINI / TOOL BUTTON
   ---------------------------------------------------------- */

.mini-button {

    min-height:
        var(--dl-button-height-sm);

    padding:
        7px 11px;

    color:
        var(--dl-ghost-text) !important;

    background:
        transparent !important;

    border:
        1px solid
        var(--dl-border) !important;

    font-size:
        13px;

    box-shadow:
        none !important;
}


.mini-button:hover {

    color:
        var(--dl-text) !important;

    background:
        var(--dl-ghost-hover) !important;

    border-color:
        var(--dl-border-strong) !important;
}


/* ----------------------------------------------------------
   FOCUS
   ---------------------------------------------------------- */

.primary-button:focus-visible,
.pm-secondary-button:focus-visible,
.pm-danger-button:focus-visible,
.mini-button:focus-visible {

    outline:
        none !important;

    box-shadow:
        0 0 0 3px
        var(--dl-focus) !important;
}


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

.primary-button:disabled,
.pm-secondary-button:disabled,
.pm-danger-button:disabled,
.mini-button:disabled {

    opacity: .48 !important;

    cursor:
        not-allowed !important;

    transform:
        none !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 640px) {

    .primary-button,
    .pm-secondary-button,
    .pm-danger-button {

        min-height:
            44px;
    }
}