/* colours also defined in jpm.xml */
html[data-color-mode="dark"] {
    .gadget {
        & .dashboard-item-header {
            background-color: var(--ds-surface-raised, #eee);
        }
        & .dashboard-item-title {
            color: var(--ds-text, #fff);
        }
    }
}

/* color1 - Light Blue */
.gadget.color1 .dashboard-item-header,
.gadget-colors .color1 > a {
    /* stylelint-disable-next-line */
    background-color: var(--jira-color-gadgetcolor1, #0747a6); /* jira previous main value: --ds-background-brand-bold */
}
.gadget.color1 .dashboard-item-title {
    color: var(--ds-surface, #fff);
}

.gadget.color1 > .gadget-hover > .dashboard-item-header,
.gadget.color1 > .gadget-hover > .dashboard-item-content {
    /* stylelint-disable-next-line */
    border-color: color-mix(in srgb, var(--jira-color-gadgetcolor1, #0747a6) 90%, #fff); /* jira previous main value: --ds-background-brand-bold */
}

/* color2 - Red */
.gadget.color2 .dashboard-item-header,
.gadget-colors .color2 > a {
    /* stylelint-disable-next-line */
    background-color: var(--jira-color-gadgetcolor2, #de350b); /* jira previous main value: --ds-background-danger-bold */
}
.gadget.color2 .dashboard-item-title {
    color: var(--ds-surface, #fff);
}

.gadget.color2 > .gadget-hover > .dashboard-item-header,
.gadget.color2 > .gadget-hover > .dashboard-item-content {
    /* stylelint-disable-next-line */
    border-color: color-mix(in srgb, var(--jira-color-gadgetcolor2, #de350b) 90%, #fff); /* jira previous main value: --ds-background-danger-bold */
}

/* color3 - Orange */
.gadget.color3 .dashboard-item-header,
.gadget-colors .color3 > a {
    /* stylelint-disable-next-line */
    background-color: var(--jira-color-gadgetcolor3, #ff8b00); /* jira previous main value: --ds-background-accent-orange-subtler-pressed */
}
.gadget.color3 .dashboard-item-title {
    color: var(--ds-surface, #fff);
}

.gadget.color3 > .gadget-hover > .dashboard-item-header,
.gadget.color3 > .gadget-hover > .dashboard-item-content {
    /* stylelint-disable-next-line */
    border-color: color-mix(in srgb, var(--jira-color-gadgetcolor3, #ff8b00) 90%, #fff); /* jira previous main value: --ds-background-accent-orange-subtler-pressed */
}

/* color4 - Green */
.gadget.color4 .dashboard-item-header,
.gadget-colors .color4 > a {
    /* stylelint-disable-next-line */
    background-color: var(--jira-color-gadgetcolor4, #00875a); /* jira previous main value: --ds-background-accent-green-bolder-hovered */
}
.gadget.color4 .dashboard-item-title {
    color: var(--ds-surface, #fff);
}

.gadget.color4 > .gadget-hover > .dashboard-item-header,
.gadget.color4 > .gadget-hover > .dashboard-item-content {
    /* stylelint-disable-next-line */
    border-color: color-mix(in srgb, var(--jira-color-gadgetcolor4, #00875a) 90%, #fff); /* jira previous main value: --ds-background-accent-green-bolder-hovered */
}

/* color5 - Dark Blue */
.gadget.color5 .dashboard-item-header,
.gadget-colors .color5 > a {
    /* stylelint-disable-next-line */
    background-color: var(--jira-color-gadgetcolor5, #00a3bf); /* jira previous main value: --ds-background-accent-teal-bolder */
}
.gadget.color5 .dashboard-item-title {
    color: var(--ds-surface, #fff);
}

.gadget.color5 > .gadget-hover > .dashboard-item-header,
.gadget.color5 > .gadget-hover > .dashboard-item-content {
    /* stylelint-disable-next-line */
    border-color: color-mix(in srgb, var(--jira-color-gadgetcolor5, #00a3bf) 90%, #fff); /* jira previous main value: --ds-background-accent-teal-bolder */
}

/* color6 - Purple */
.gadget.color6 .dashboard-item-header,
.gadget-colors .color6 > a {
    /* stylelint-disable-next-line */
    background-color: var(--jira-color-gadgetcolor6, #6554c0); /* jira previous main value: --ds-background-accent-purple-bolder-hovered */
}
.gadget.color6 .dashboard-item-title {
    color: var(--ds-surface, #fff);
}

.gadget.color6 > .gadget-hover > .dashboard-item-header,
.gadget.color6 > .gadget-hover > .dashboard-item-content {
    /* stylelint-disable-next-line */
    border-color: color-mix(in srgb, var(--jira-color-gadgetcolor6, #6554c0) 90%, #fff); /* jira previous main value: --ds-background-accent-purple-bolder-hovered */
}

/* color7 - Light Gray */
.gadget.color7 .dashboard-item-header,
.gadget-colors .color7 > a {
    /* stylelint-disable-next-line */
    background-color: var(--jira-color-gadgetcolor7, #5e6c84); /* jira previous main value: --ds-background-accent-gray-bolder */
}
.gadget.color7 .dashboard-item-title {
    color: var(--ds-surface, #fff);
}

.gadget.color7 > .gadget-hover > .dashboard-item-header,
.gadget.color7 > .gadget-hover > .dashboard-item-content {
    /* stylelint-disable-next-line */
    border-color: color-mix(in srgb, var(--jira-color-gadgetcolor7, #5e6c84) 90%, #fff); /* jira previous main value: --ds-background-accent-gray-bolder */
}

/* color8 - Transparent, consider overhaul in issue DTJ-235 */
.gadget.color8 .dashboard-item-title {
    a {
        color: var(--ds-text, #444);
    }
}