:root {
  --osd-background-color: rgba(240, 240, 240, 0.75);
}

headerbar.desktop windowcontrols button image {
    color: alpha(white, 0.9);
    background: alpha(black, 0.6);
}

headerbar.desktop windowcontrols button:hover image {
    background: alpha(mix(black, white, 0.1), 0.5);
}

headerbar.desktop windowcontrols button:active image {
    background: alpha(mix(black, white, 0.2), 0.5);
}

.preset-button {
    min-width: 80px;
    min-height: 60px;
    box-shadow: 0 0 0 1px @borders;
    padding: 0;
    border-radius: 6px;
    transition: filter 0.3s ease;
}

.preset-button, .gradient-editor, .provider-source-view{
    box-shadow: 0 0 0 1px alpha(black, 0.03),
          0 1px 3px 1px alpha(black, .07),
          0 2px 6px 2px alpha(black, .03);
}

.provider-source-view {
    border-radius:12px;
}

.preset-button:hover {
    filter: brightness(1.1);
}

.preset-button picture {
    border-radius: 6px;
}

/* Circular color picker*/
.gradient-color-picker {
    border-radius: 9999px;
    min-width: 32px;
    min-height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: all 0.2s ease;
}

.gradient-color-picker:hover {
    filter: brightness(1.1);
}

.gradient-color-button.dark,
.simple-color-picker image.dark,
.simple-color-picker label.dark {
    color: black;
}

.simple-color-picker{
    color:white;
    border-radius: 9px;
    padding: 8px 12px;
}

.gradient-color-button{
    color: white;
    border: none;
}

.gradient-editor {
  border-radius: 40px;
  background: none;
  min-height: 34px;
}

.gradient-background {
  border-radius: 34px;
  min-height: 34px;
}

.angle-entry {
  border-radius: 6px;
}

.monospace {
  font-family: monospace;
}

.recent-button{
    background-size: cover;
    transition: filter 0.3s ease;
    border-radius:10px;
}

.recent-button:hover{
    filter: brightness(1.1);
}

.recent-button:active{
    filter: brightness(0.9);
}

.recent-button-flowbox > flowboxchild:focus {
    border-radius:12px;
}

.bold {
    font-weight: bold;
}

frame.window-border {
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}

.title-entry.no-highlights text selection {
  background-color: transparent;
}

.sourceview.no-highlights text selection {
    background-color: transparent;
}

.title-entry.no-highlights {
  outline: none;
  transition-property: none;
  transition-duration: 0s;
  transition-delay: 0s;
}

.rotate.circular {
  min-width: 30px;
  min-height: 30px;
}

 GtkSourceStyleSchemePreview {
  border-radius: 6px;
}

 GtkSourceStyleSchemePreview > image {
    background-color: @accent_bg_color;
    border-radius:999px;
    margin-right:5px;
    margin-bottom:5px;
}

GtkSourceStyleSchemePreview .selected {
    border: 5px solid @accent_bg_color;
}

.flat-dropdown > button:not(:checked):not(:hover) {
  background: transparent;
  box-shadow: none;
}


/* background selectors */
.color-button {
    border-radius: 9999px;
    border: 1px solid @borders;
    padding: 0;
    transition: filter 0.3s ease, outline 0.15s ease, outline-offset 0.15s ease;
}

.color-hover-bg {
    padding:6px;
}

.checkmark-icon {
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.checkmark-icon.dark {
    color: black;
}

.checkmark-icon.visible {
    opacity: 1;
}

.color-button:focus {
    outline: 2px solid @accent_color;
    outline-offset: 2px;
}

.color-button:focus-visible {
    outline: 2px solid @accent_color;
    outline-offset: 2px;
}

.color-button:hover {
    filter: brightness(1.1);
}

.transparent-color-button, .transparent-color-button-small, .transparent-simple-color-picker {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h10v10H0zM10 10h10v10H10z' fill='%23e5e5e5'/%3E%3C/svg%3E");
    background-color: #b2b2b2;
}

.transparent-color-button {
    background-size: 20px 20px;
}

.transparent-color-button-small {
    background-size: 15px 15px;
}

button.color-picker-button {
    background: conic-gradient(
        #ffb3ba 0%,
        #ffeaa7 16.66%,
        #b8e994 33.33%,
        #a0f0ed 50%,
        #a3cbf5 66.66%,
        #d4a5f9 83.33%,
        #ffb3ba 100%
    );
    border: none;
}


/*drop_overlay.py*/
.drop-overlay-status-page{
  background-color: alpha(@accent_bg_color, 0.5);
  color: @accent_fg_color;
}

.osd-box {
  border-radius: 12px;
  background-color: var(--osd-background-color);
  padding: 6px;
}

.header-osd windowcontrols button image {
  background-color: var(--osd-background-color);
  background-image: none;
}

toggle-group toggle  {
    padding-left:9px;
    padding-right:9px;
}

image.symbolic-circular {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
}

.rounded-top {
    background-color: #d9d9da;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.semi-transparent {
  opacity: 0.8;
  transition: opacity 200ms ease;
}

.semi-transparent:hover, .semi-transparent:active{
  opacity: 1;
}

