@import "colors.less";

.colors-light {
    .colors(
        @bg-color: #f1f3f5,
        @default-bg-color: #d8dee3,
        @hover-bg-color: #ced4da,
        @text-color: #343a40,
        @error-text-color: #e03131,
        @dim-text-color: #868e96,
        @badge-color: #b8b8b8,
        @input-bg-color: #eaeef1,
        @active-input-bg-color: #e8ebee,
        @input-text-color: #343a40,
        @hint-bg-color: #1c7ed6,
        @hint-color: #e7f5ff,
        @match-text-bg-color: #cfecff,
        @match-text-color: #1873ea,
        @invert-text-color: #f1f3f5,
        @snack-color: #7a7a7a,
        @snack-label-color: #7a7a7a,
        @progress-color: #c7d5ff,
        @edit-bg-color: #ffffff,

        // tree browser colors
        @treeopt-bg-color: #464545,

        // notifications
        @ntfy-hover-shadow: rgba(0, 0, 0, 0.3),
        @ntfy-info-color: #0c525e,
        @ntfy-info-bgcolor: #d1ecf1,
        @ntfy-info-border: #bee5eb,
        @ntfy-warning-color: #684e03,
        @ntfy-warning-bgcolor: #fff3cd,
        @ntfy-warning-border: #ffeeba,
        @ntfy-error-color: #721c24,
        @ntfy-error-bgcolor: #f8d7da,
        @ntfy-error-border: #f5c6cb,
        @ntfy-success-color: #155624,
        @ntfy-success-bgcolor: #d4edda,
        @ntfy-success-border: #c3e6cb
    );

    .part.login .name .line1 .recent,
    .part.login .action.copy-password,
    .part.login .action.copy-user,
    .part.login .action.details,
    .part.login .action.edit,
    .part.login .action.save,
    .part.login .action.delete,
    .part.details .action.copy,
    .title .btn.back,
    .title .btn.save,
    .title .btn.edit {
        filter: invert(85%);
    }

    .part.login .name .line1 .recent:focus,
    .part.login .name .line1 .recent:hover,
    .part.login .action.copy-password:focus,
    .part.login .action.copy-password:hover,
    .part.login .action.copy-user:focus,
    .part.login .action.copy-user:hover,
    .part.login .action.details:focus,
    .part.login .action.details:hover,
    .title .btn.back:focus,
    .title .btn.back:hover,
    .title .btn.save:focus,
    .title .btn.save:hover,
    .title .btn.edit:focus,
    .title .btn.edit:hover {
        // colour such that invert(85%) ~= @hover-bg-color
        background-color: #0c0804;
    }

    .part.details .part.snack {
        &.line-otp {
            background: transparent;
        }
        .progress-container {
            background-color: #ffffff;
            z-index: -1;
            margin-top: -4px;
            height: 34px;
        }
    }

    .details {
        .loading {
            background: url(/popup/page-loader.gif) center no-repeat;
            background-size: 150px;
            background-position-y: 50px;
        }
    }
}
