TryGhost/Ghost

.pintura-editor {
    --color-background: 0, 0, 0 !important;
    --color-foreground: 255, 255, 255 !important;
    --font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Droid Sans, Helvetica Neue, sans-serif !important;
    --editor-modal-border-radius: 3px !important;
}

/* .PinturaModal {
    padding: 32px !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.PinturaRoot {
    border-radius: 9px !important;
} */

.PinturaRoot[data-env~=landscape][data-env~=has-navigation] > .PinturaMain {
    grid-column: 1 / -1 !important;
}

.PinturaRoot[data-env~=landscape] .PinturaStage {
    margin: auto !important;
    max-width: calc(100% - 190px) !important;
    width: 100% !important;
}

.PinturaRoot > .PinturaNavTools {
    padding: 24px 24px 0 !important;
}

.PinturaRoot > .PinturaNav .PinturaButton:only-of-type {
    padding: 0 14px !important;
    height: 34px !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    color: var(--black) !important;
    background-color: var(--white) !important;
    border-radius: 3px !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

.PinturaRoot > .PinturaNav .PinturaButtonExport .PinturaButtonInner {
    height: auto !important;
}

.PinturaRoot .PinturaButtonExport:hover {
    color: var(--black) !important;
    background-color: var(--white) !important;
    opacity: 0.95 !important;
}

/* .PinturaRoot .PinturaNavSet {
    box-shadow: none !important;
}

.PinturaRoot .PinturaNavSet > :not(:only-child) {
    border: 0 !important;
}

.PinturaRoot .PinturaNavSet > button[title="Close"] {
    margin-left: -4px !important;
}

.PinturaRoot > .PinturaNav .PinturaButton svg {
    width: 20px !important;
}

.PinturaRoot > .PinturaNav .PinturaButton:not(.PinturaButtonExport):hover {
    background: none !important;
} */

.PinturaRoot[data-env~=landscape] .PinturaNavGroup {
    margin-left: 0 !important;
}

.PinturaRoot[data-env~=landscape] .PinturaUtilMain {
    padding-right: 0 !important;
}

.PinturaRoot[data-env~=landscape] .PinturaUtilFooter {
    padding-right: 0 !important;
}


/* Main nav */

/* .PinturaRoot[data-env~=landscape] > .PinturaNavMain {
    left: 24px !important;
}

.PinturaRoot > .PinturaNavMain .PinturaTabList [aria-selected=true] {
    color: var(--green) !important;
}

.PinturaRoot[data-env~=landscape] > .PinturaNavMain button {
    flex-direction: row !important;
    gap: 8px !important;
    width: 120px !important;
    height: 32px !important;
    box-shadow: none !important;
    background: none !important;
    backdrop-filter: none !important;
}

.PinturaRoot[data-env~=landscape] > .PinturaNavMain button svg {
    width: 24px !important;
    margin-top: 0 !important;
}

.PinturaRoot[data-env~=landscape] > .PinturaNavMain button span {
    margin-top: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
} */

/* Cropping */

.PinturaRectManipulator[data-shape~=circle] {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.PinturaRectManipulator:not([data-shape=edge])::after {
    inset: 0 !important;
    border-radius: 0 !important;
    content: "" !important;
    border-style: solid !important;
    border-width: 4px 4px 0 0 !important;
    display: inline-block !important;
    height: 20px !important;
    position: relative !important;
    transform: rotate(-90deg) !important;
    width: 20px !important;
    border-color: rgba(255, 255, 255, 1) !important;
}

.PinturaRectManipulator[data-shape~=circle][data-direction=tr] {
    left: -20px !important;
}

.PinturaRectManipulator[data-shape~=circle][data-direction=tr]::after {
    transform: rotate(0) !important;
}

.PinturaRectManipulator[data-shape~=circle][data-direction=bl] {
    top: -20px !important;
}

.PinturaRectManipulator[data-shape~=circle][data-direction=bl]::after {
    transform: rotate(180deg) !important;
}

.PinturaRectManipulator[data-shape~=circle][data-direction=br] {
    top: -20px !important;
    left: -20px !important;
}

.PinturaRectManipulator[data-shape~=circle][data-direction=br]::after {
    transform: rotate(90deg) !important;
}

/* Toolbar */

/* .PinturaUtilHeader {
    padding-bottom: 4px !important;
}

.PinturaToolbar .PinturaToolbarInner > * {
    margin: 0 4px !important;
}

.PinturaToolbar .PinturaButton:hover {
    color: var(--green) !important;
    box-shadow: none !important;
}

.PinturaToolbar .PinturaButton[title="Rotate left"] svg {
    margin-top: -2px !important;
}

.PinturaToolbar .PinturaButton[title="Flip horizontal"] svg {
    margin-top: -3px !important;
}

.PinturaButton svg + .PinturaButtonLabel {
    margin-left: 4px !important;
} */

/* Tab list */

/* .PinturaUtilFooter .PinturaControlList [role=tab] button {
    padding: 0 10px !important;
}

.PinturaUtilFooter .PinturaControlList [role=tab][aria-selected=true] button {
    color: var(--green) !important;
    background: none !important;
    box-shadow: none !important;
}

.PinturaUtilFooter .PinturaControlList .PinturaControlListOption label:hover,
.PinturaUtilFooter .PinturaControlList [role=tab] button:hover {
    box-shadow: none !important;
}

.PinturaUtilFooter .PinturaControlList [role=tab] button span {
    font-weight: 500 !important;
} */