/* Colored Gadgets */
.gadget .dashboard-item-title {
    color: var(--ds-text-inverse, #fff);
}

/* color1 - Light Blue */
.gadget.color1 .dashboard-item-header,
.gadget-colors .color1 > a {
    background-color: var(--ds-chart-blue-bold, #0747A6);
}

/* color2 - Red */
.gadget.color2 .dashboard-item-header,
.gadget-colors .color2 > a {
    background-color: var(--ds-chart-red-bold, #DE350B);
}

/* color3 - Orange */
.gadget.color3 .dashboard-item-header,
.gadget-colors .color3 > a {
    background-color: var(--ds-chart-orange-bold, #FF8B00);
}

/* color4 - Green */
.gadget.color4 .dashboard-item-header,
.gadget-colors .color4 > a {
    background-color: var(--ds-chart-green-bold, #00875A);
}

/* color5 - Dark Blue */
.gadget.color5 .dashboard-item-header,
.gadget-colors .color5 > a {
    background-color: var(--ds-chart-teal-bold, #00A3BF);
}

/* color6 - Purple */
.gadget.color6 .dashboard-item-header,
.gadget-colors .color6 > a {
    background-color: var(--ds-chart-purple-bold, #6554C0);
}

/* color7 - Light Gray */
.gadget.color7 .dashboard-item-header,
.gadget-colors .color7 > a {
    background-color: var(--ds-chart-gray-bold, #5E6C84);
}

/* color8 -- Octarine! */
.gadget.color8 .dashboard-item-header {
    background-color: transparent;
    transition: background-color ease-in 0.2s;
}

.gadget.color8 .dashboard-item-content {
    background-color: transparent;
    box-shadow: none;
    transition: all ease-in 0.2s;
}

.gadget.color8 .gadget-container {
    border-color: transparent;
    transition: border-color ease-in 0.2s;
}

.gadget-colors .color8 > a {
    background: transparent url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0D%0A%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0D%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2048.2%20%2847327%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0D%0A%20%20%20%20%3Ctitle%3Eicon-transparent-square%3C%2Ftitle%3E%0D%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0D%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Cg%20id%3D%22Dashboard-logged-in%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%28-446.000000%2C%20-518.000000%29%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-transparent-square%22%20transform%3D%22translate%28446.000000%2C%20518.000000%29%22%20stroke-width%3D%222%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1.5%2C14.5%20L14.5%2C1.5%22%20id%3D%22Line-3%22%20stroke%3D%22%23FF5630%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20stroke%3D%22%23DFE1E6%22%20x%3D%221%22%20y%3D%221%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E') no-repeat center;
    border: 1px solid var(--ds-border, #ccc);
}

.gadget.color8 .dashboard-item-header .aui-icon,
.gadget.color8 .dashboard-item-header .aui-dd-trigger {
    visibility: hidden;
}

.gadget.color8 .dashboard-item-header .aui-icon.move #Combined-Shape {
    fill: var(--ds-text-subtle, #42526E);
}

html[data-color-mode="dark"] .gadget.color8 .dashboard-item-header,
.gadget.color8 .dashboard-item-content {
    border-color: transparent;
}

.gadget.color8 > .gadget-hover > .dashboard-item-content {
    box-shadow: 0 2px 2px 0 rgba(9, 30, 66, 0.13);
}

.gadget.color8 > .gadget-hover > .dashboard-item-header,
.gadget.color8 > .gadget-hover > .dashboard-item-content {
    background-color: var(--ds-surface, #ffffff);
}

.gadget.color8 > .gadget-hover.gadget-container {
    border: 1px solid rgba(9, 30, 66, 0.04);
}

.gadget.color8 > .gadget-hover > .dashboard-item-header .aui-icon,
.gadget.color8 > .gadget-hover > .dashboard-item-header .aui-dd-trigger {
    visibility: visible;
    color: var(--ds-text-subtle, #42526E);
}

.gadget.color8 .dashboard-item-title {
    color: var(--ds-text-subtle, #42526E);
    visibility: hidden;
}

.gadget.color8 > .gadget-hover .dashboard-item-title {
    visibility: visible;
}

/* demonstrate the selected gadget colour */
.gadget.color1 .gadget-colors .color1 a,
.gadget.color2 .gadget-colors .color2 a,
.gadget.color3 .gadget-colors .color3 a,
.gadget.color4 .gadget-colors .color4 a,
.gadget.color5 .gadget-colors .color5 a,
.gadget.color6 .gadget-colors .color6 a,
.gadget.color7 .gadget-colors .color7 a,
.gadget.color8 .gadget-colors .color8 a {
    outline: 2px solid var(--ds-chart-teal-bold, #3C78B5);
}