html.sp-theme-dark {
    --color-primary-100: hsl(210 21% 70% / 1) !important;
    --color-primary-200: hsl(210 24% 60% / 1) !important;
    --color-primary-300: hsl(220 18% 46% / 1) !important;
    --color-primary-400: hsl(220 18% 40% / 1) !important;
    --color-primary-500: hsl(220 18% 33% / 1) !important;
    --color-primary-600: hsl(220 18% 26% / 1) !important;
    --color-primary-700: hsl(220 19% 18% / 1) !important;
    --color-primary-800: hsl(220 42% 11% / 1) !important;
    --color-primary-900: hsl(220 100% 4% / 1) !important;
    --color-background-primary: hsl(220 30% 18% / 1) !important;
    --color-background-secondary: hsl(220 32% 28% / 1) !important;
    --color-background-tertiary: hsl(220 18% 33% / 1) !important;
    --color-text-primary: hsl(217deg 100% 94%) !important;
    --color-text-secondary: hsl(210 46% 80% / 1) !important;
    --color-text-tertiary: hsl(220 15% 52% / 1) !important;
}

.sp-theme-dark {
    --color-primary-100: hsl(210 21% 70% / 1) !important;
    --color-primary-200: hsl(210 24% 60% / 1) !important;
    --color-primary-300: hsl(220 18% 46% / 1) !important;
    --color-primary-400: hsl(220 18% 40% / 1) !important;
    --color-primary-500: hsl(220 18% 33% / 1) !important;
    --color-primary-600: hsl(220 18% 26% / 1) !important;
    --color-primary-700: hsl(220 19% 18% / 1) !important;
    --color-primary-800: hsl(220 42% 11% / 1) !important;
    --color-primary-900: hsl(220 100% 4% / 1) !important;
    --color-background-primary: hsl(220 30% 18% / 1) !important;
    --color-background-secondary: hsl(220 32% 28% / 1) !important;
    --color-background-tertiary: hsl(220 18% 33% / 1) !important;
    --color-text-primary: hsl(217deg 100% 94%) !important;
    --color-text-secondary: hsl(210 46% 80% / 1) !important;
    --color-text-tertiary: hsl(220 15% 52% / 1) !important;
}

/*
    If you use an sp-alert-close in an sp-alert-with-icon, align it to the top
    and prevent its height from expanding
 */
.sp-alert.sp-alert-with-icon {
    align-items: flex-start;
}
.sp-alert-with-icon .sp-alert-close {
    margin-left: 0.75rem;
}

/* Fix to actually show when TinyMCE toolbar buttons are selected */
.tox .tox-tbtn.tox-tbtn--enabled svg {
    fill: var(--color-text-secondary) !important;
}

/* Selected class for buttons */
.sp-button.selected {
    background-color: var(--color-background-tertiary);
}


/* Article attachment styling */

ul.sp-attachments>li, .sp-message ul.sp-attachments>li {
    margin-right: 0;
    margin-top: 0.5rem;
    max-width: 100%;
    width: 100%;
}

ul.sp-attachments>li a {
    align-items: center;
    background-color: var(--color-background-primary);
    border-width: 1px;
    display: flex;
    font-weight: 600;
    padding-left: 0.65rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.sp-message ul.sp-attachments>li a {
    background-color: var(--color-background-secondary)
}

ul.sp-attachments>li a:hover {
    background-color: var(--color-background-secondary);
}
.sp-message ul.sp-attachments>li a:hover {
    background-color: var(--color-background-tertiary);
}

ul.sp-attachments>li a div.sp-preview {
    align-items: center;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    height: 2rem;
    justify-content: center;
    margin-right: 0.6rem;
    width: 2rem;
}

ul.sp-attachments>li a div.sp-preview>span {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

ul.sp-attachments>li a div.sp-preview>span>img {
    max-height: 100%;
    top: auto !important;
    transform: none;
}

ul.sp-attachments>li a div.sp-preview .fiv-viv {
    font-size: 2rem;
}

ul.sp-attachments>li a div.sp-attachment-name {
    white-space: normal;
}

ul.sp-attachments>li a div.sp-description {
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.5rem;
}

ul.sp-attachments>li .sp-delete-attachment+a {
    padding-right: 2.4rem;
}

ul.sp-attachments>li .sp-delete-attachment {
    align-items: center;
    border-bottom-right-radius: 0.25rem;
    display: flex;
    height: 100%;
    justify-content: center;
}

@media (min-width: 640px) {
    ul.sp-attachments>li {
        width: 100%;
    }
}


/* Article, potentially frontend ticket response, Add Attachment button styling */

.sp-file-input input.sp-file-upload {
    pointer-events: none;
}