{% extends 'admin/base_site.html' %}
{% load static %}

{% block extrastyle %}
{{ block.super }}
<style>
    :root, :root .admin-interface {
        --djai-tab-bg: var(--admin-interface-header-background-color);
        --djai-tab-fg: var(--admin-interface-header-text-color);

        --djai-tab-bg--active: var(--djai-tab-fg);
        --djai-tab-bg--hover: var(--djai-tab-fg);
        --djai-tab-fg--active: var(--djai-tab-bg);
        --djai-tab-fg--hover: var(--djai-tab-bg);

        --djai-dropdown-bg: var(--djai-tab-bg);
        --djai-dropdown-fg: var(--djai-tab-fg);

        --djai-dropdown-bg--active: var(--djai-tab-fg);
        --djai-dropdown-bg--hover: var(--djai-tab-fg);
        --djai-dropdown-fg--active: var(--djai-tab-bg);
        --djai-dropdown-fg--hover: var(--djai-tab-bg);
    }


    .djai-dropdown-menu .djai-dropdown-menu__drop {
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1), -2px 2px 3px rgba(0, 0, 0, 0.1) !important;
    }

    .djai-dropdown-menu a.djai-dropdown-menu__item:hover {
        color: var(--djai-tab-fg--hover) !important;
    }

    .djai-dropdown-menu a.djai-dropdown-menu__item.djai-dropdown-menu__item--active {
        color: var(--djai-tab-fg--active) !important;
    }

    .djai-dropdown-menu .djai-dropdown-menu__drop-item--active a {
        color: var(--djai-tab-fg--active) !important;
    }

    #header .djai-dropdown-menu .djai-dropdown-menu__drop-item {
        transition: .15s;
    }

    #header .djai-dropdown-menu .djai-dropdown-menu__drop-item a {
        color: var(--djai-dropdown-fg);
    }

    #header .djai-dropdown-menu .djai-dropdown-menu__drop-item a:hover {
        color: var(--djai-dropdown-fg--hover) !important;
        text-decoration: none;
    }


    .index-action-buttons {
        display: flex;
        flex-direction: row;
        column-gap: 10px;
    }

    .index-action-buttons button,
    .index-action-buttons [aria-role="button"],
    .index-action-buttons button:visited,
    .index-action-buttons [aria-role="button"]:visited,
    .index-action-buttons button:hover,
    .index-action-buttons [aria-role="button"]:hover {
        padding: 10px 15px;
        margin-bottom: 15px;
        background-color: var(--admin-interface-module-background-color) !important;
        color: var(--admin-interface-module-text-color) !important;
        border-radius: var(--admin-interface-module-border-radius) !important;
        text-decoration: none !important;
    }


    .module caption, .inline-group h2 {
        text-transform: none;
    }
</style>
{% endblock %}