.colors(
    @bg-color,
    @default-bg-color,
    @hover-bg-color,
    @text-color,
    @error-text-color,
    @dim-text-color,
    @badge-color,
    @input-bg-color,
    @active-input-bg-color,
    @input-text-color,
    @hint-bg-color,
    @hint-color,
    @match-text-bg-color,
    @match-text-color,
    @invert-text-color,
    @snack-color,
    @snack-label-color,
    @progress-color,
    @edit-bg-color,
    // tree browser colors
    @treeopt-bg-color,
    // notification colors
    @ntfy-hover-shadow,
    @ntfy-info-color,
    @ntfy-info-bgcolor,
    @ntfy-info-border,
    @ntfy-warning-color,
    @ntfy-warning-bgcolor,
    @ntfy-warning-border,
    @ntfy-error-color,
    @ntfy-error-bgcolor,
    @ntfy-error-border,
    @ntfy-success-color,
    @ntfy-success-bgcolor,
    @ntfy-success-border) {
    html,
    body {
        background-color: @bg-color;
        color: @text-color;
    }

    .badge {
        background-color: @badge-color;
    }

    .addEdit,
    .details {
        .btn {
            &.generate {
                background-color: @edit-bg-color;
            }

            &:hover,
            &:focus {
                background-color: @hover-bg-color;
            }
        }

        .contents {
            .password {
                background-color: @edit-bg-color;
            }

            .password,
            .details {
                border-color: @snack-color;
            }
        }

        .location {
            select {
                background-color: @input-bg-color;
                color: @input-text-color;
            }

            .path {
                background-color: @edit-bg-color;
                border-color: @snack-color;
                color: @text-color;
            }
        }

        .actions {
            .save {
                background-color: @ntfy-success-bgcolor;
                border: 2px solid @ntfy-success-border;
                color: @ntfy-success-color;
            }
            .delete {
                background-color: @ntfy-error-bgcolor;
                border: 2px solid @ntfy-error-border;
                color: @ntfy-error-color;
            }
            .save,
            .delete {
                &:hover {
                    box-shadow: 1px 1px 2px @ntfy-hover-shadow;
                }
            }
        }

        label {
            background-color: @snack-label-color;
            color: @invert-text-color;
        }

        input[type="number"],
        input[type="text"],
        textarea {
            background-color: @edit-bg-color;
            border-color: @snack-color;
            color: @text-color;
        }
    }

    .part.error {
        color: @error-text-color;
    }

    .part.add {
        background-color: @bg-color;
        &:hover,
        &:focus {
            outline: none;
            background-color: @hover-bg-color;
        }
    }

    .part.details {
        .part {
            &.snack {
                background-color: @edit-bg-color;
                border-color: @snack-color;
                .label {
                    background-color: @snack-label-color;
                    color: @invert-text-color;
                }
                .progress-container {
                    background: transparent;
                    .progress {
                        background-color: @progress-color;
                    }
                }
            }
            &.raw textarea {
                background-color: @edit-bg-color;
                border-color: @snack-color;
                color: @text-color;
            }
        }
    }

    .char.num,
    .char.punct {
        color: @match-text-color;
    }

    .part.search {
        background-color: @input-bg-color;
    }

    .part.search:focus-within {
        background-color: @active-input-bg-color;
    }

    .part.search > .hint {
        background-color: @hint-bg-color;
        color: @hint-color;
    }

    .part.search > input[type="text"] {
        background-color: transparent;
        color: @input-text-color;
    }

    .part.search > input[type="text"]::placeholder {
        color: @dim-text-color;
    }

    .logins:not(:hover):not(:focus-within) .part.login:first-child > .name {
        background-color: @default-bg-color;
    }

    .part.login:not(.details-header) > .name:hover,
    .part.login:not(.details-header) > .name:focus,
    .part.login:not(.details-header) > .action:hover,
    .part.login:not(.details-header) > .action:focus,
    .part.login:not(.details-header):focus > .name {
        background-color: @hover-bg-color;
    }

    .part.login em {
        background-color: @match-text-bg-color;
        color: @match-text-color;
    }

    .updates {
        border-top: 1px solid @hover-bg-color;

        span,
        a {
            color: @error-text-color;
        }
    }

    .m-notifications {
        .m-notification {
            &:hover {
                box-shadow: 1px 1px 2px @ntfy-hover-shadow;
            }

            &.info {
                color: @ntfy-info-color;
                background-color: @ntfy-info-bgcolor;
                border: 1px solid @ntfy-info-border;
            }

            &.warning {
                color: @ntfy-warning-color;
                background-color: @ntfy-warning-bgcolor;
                border: 1px solid @ntfy-warning-border;
            }

            &.error {
                color: @ntfy-error-color;
                background-color: @ntfy-error-bgcolor;
                border: 1px solid @ntfy-error-border;
            }

            &.success {
                color: @ntfy-success-color;
                background-color: @ntfy-success-bgcolor;
                border: 1px solid @ntfy-success-border;
            }
        }
    }

    div#tree-dirs {
        div.dropdown {
            a {
                background-color: @treeopt-bg-color;

                color: #fff;
                &:hover,
                &:focus-visible {
                    filter: invert(15%);
                    outline: none;
                }
            }
        }
    }

    dialog#browserpass-modal {
        color: @ntfy-info-color;
        background-color: @ntfy-info-bgcolor;
        border: 3px solid @ntfy-info-border;

        button {
            &:hover {
                box-shadow: 1px 1px 2px @ntfy-hover-shadow;
            }

            color: @ntfy-warning-color;
            background-color: @ntfy-warning-bgcolor;
            border: 1px solid @ntfy-warning-border;
        }

        &.warning {
            color: @ntfy-warning-color;
            background-color: @ntfy-warning-bgcolor;
            border: 1px solid @ntfy-warning-border;
        }
        &.error {
            color: @ntfy-error-color;
            background-color: @ntfy-error-bgcolor;
            border: 1px solid @ntfy-error-border;
        }

        &.warning,
        &.error {
            button {
                color: @ntfy-info-color;
                background-color: @ntfy-info-bgcolor;
                border: 1px solid @ntfy-info-border;
            }
        }
    }
}
