/*
 * vim: ft=less
 */

@define-color cc-bg rgba(42, 44, 54, 0.5);

@define-color noti-border-color rgba(255, 255, 255, 0.15);
@define-color noti-bg rgba(42, 44, 54, 0.6);
@define-color noti-bg-hover rgba(52, 54, 64, 0.6);
@define-color noti-bg-focus rgba(55, 57, 67, 0.4);
@define-color noti-close-bg rgba(255, 255, 255, 0.1);
@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);

@define-color text-color rgba(255, 255, 255, 0.6);
@define-color text-color-low rgba(136, 136, 136, 0.6);

@define-color mpris-album-art-overlay rgba(52, 54, 64, 0.6);
@define-color mpris-button-hover rgba(55, 57, 67, 0.4);

@define-color bg-selected rgb(0, 128, 255);

* {
    font-family: monospace;
}

.low {
    color: @text-color-low;
}

.normal {
    color: @text-color;
}

.critical {
    color: red;
}


.testing {
    background-color: red;
}

.notification-row {
    all: unset;
    font-size: 11px;
    transition: all 200ms ease;
    outline: none;
    margin-bottom: 4px;
    border-radius: 12px;
}

.notification-row:hover {
    background: transparent;
}

.control-center .notification-row:focus,
.control-center .notification-row:hover {
    opacity: 1;
    background: transparent;
}

.notification-row:focus .notification,
.notification-row:hover .notification {
    /* box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5); */
    /* box-shadow: 0px 0px 0px 3px @bg-selected; */
    box-shadow: none;
}

.control-center .notification {
    box-shadow: none;
}

.control-center .notification-row {
    opacity: 0.5;
}

.notification {
    background: @noti-bg;
    transition: all 200ms ease;
    border-radius: 12px;
    margin: 6px 6px;
    box-shadow: none;
    padding: 0;
}

.notification-content {
    background: transparent;
    padding: 6px;
    border-radius: 12px;
}

.close-button {
    background: @noti-close-bg;
    color: @text-color;
    text-shadow: none;
    padding: 0;
    border-radius: 100%;
    margin-top: 10px;
    margin-right: 10px;
    box-shadow: none;
    border: none;
    min-width: 24px;
    min-height: 24px;
}

.close-button:hover {
    box-shadow: none;
    background: @noti-close-bg-hover;
    transition: all 0.15s ease-in-out;
    border: none;
}

.notification-default-action,
.notification-action {
    padding: 4px;
    margin: 0;
    box-shadow: none;
    background: @noti-bg;
    border: 0px;
    color: white;
    transition: all 200ms ease;
}

.notification-default-action:hover,
.notification-action:hover {
    -gtk-icon-effect: none;
    background: @noti-bg-hover;
}

.notification-default-action {
    border-radius: 12px;
}

/* When alternative actions are visible */
.notification-default-action:not(:only-child) {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.notification-action {
    border-radius: 0px;
    border-top: none;
    border-right: none;
}

/* add bottom border radius to eliminate clipping */
.notification-action:first-child {
    border-bottom-left-radius: 12px;
}

.notification-action:last-child {
    border-bottom-right-radius: 12px;
    border-right: 1px solid @noti-border-color;
}

.image {}

.body-image {
    margin-top: 6px;
    background-color: white;
    border-radius: 12px;
}

.summary {
    font-size: 16px;
    font-weight: bold;
    background: transparent;
    color: @text-color;
    text-shadow: none;
}

.time {
    font-size: 16px;
    font-weight: bold;
    background: transparent;
    color: @text-color;
    text-shadow: none;
    margin-right: 18px;
}

.body {
    font-size: 15px;
    font-weight: normal;
    background: transparent;
    color: @text-color;
    text-shadow: none;
}

.control-center {
    background: @cc-bg;
    border-radius: 12px;
    background-clip: border-box;
    padding: 4px;
    box-shadow: none;
}

.control-center-list {
    background: transparent;
}

.control-center-list-placeholder {
    opacity: 0.5;
}

.floating-notifications {
    background: transparent;
}

/* Window behind control center and on all other monitors */
.blank-window {
    background: transparent;
}

/*** Widgets ***/

/* Title widget */
.widget-title {
    margin: 8px;
    font-size: 1.5rem;
    font-weight: bold;
    color: @text-color;
}

.widget-title>button {
    font-size: initial;
    color: @text-color;
    text-shadow: none;
    background: @noti-bg;
    border: 0px;
    box-shadow: none;
    border-radius: 12px;
}

.widget-title>button:hover {
    background: @noti-bg-hover;
}

/* DND widget */
.widget-dnd {
    margin: 8px;
    font-size: 1.1rem;
    color: @text-color;
}

.widget-dnd>switch {
    font-size: initial;
    border-radius: 12px;
    background: @noti-bg;
    border: 0px;
    box-shadow: none;
}

.widget-dnd>switch:checked {
    background: @text-color-low;
}

.widget-dnd>switch slider {
    background: @noti-bg-hover;
    border-radius: 12px;
}

/* Label widget */
.widget-label {
    margin: 8px;
}

.widget-label>label {
    font-size: 1.1rem;
}

/* Mpris widget */
.widget-mpris {
    color: @text-color
}

.widget-mpris-player {
    padding: 16px;
    margin: 16px;
    background-color: @mpris-album-art-overlay;
    border-radius: 12px;
    box-shadow: none;
}

.widget-mpris-album-art {
    border-radius: 12px;
    box-shadow: none;
}

.widget-mpris-player button {
    /* The media player buttons (play, pause, next, etc...) */
    color: @text-color;
    /*background-color: @mpris-button-hover;*/
}

.widget-mpris-player button:disabled {
    /* The media player buttons (play, pause, next, etc...) */
    color: @text-color-low;
    /*background-color: @mpris-button-hover;*/
}

.widget-mpris-player button:hover {
    /* The media player buttons (play, pause, next, etc...) */
    background-color: @mpris-button-hover;
    /*background-color: @mpris-button-hover;*/
}

.widget-mpris>box>button {
    color: @text-color;
}

.widget-mpris>box>button:disabled {
    color: @text-color-low;
}

.widget-mpris-title {
    font-weight: bold;
    font-size: 1.25rem;
}

.widget-mpris-subtitle {
    font-size: 1.1rem;
}

/* Buttons widget */
.widget-buttons-grid {
    padding: 8px;
    margin: 8px;
    border-radius: 12px;
    border: 0px;
    background-color: @noti-bg;
}

.widget-buttons-grid>flowbox>flowboxchild>button {
    color: @text-color;
    background: @noti-bg;
    border: 0px;
    border-radius: 12px;
}

.widget-buttons-grid>flowbox>flowboxchild>button:hover {
    background: @noti-bg-hover;
}

/* Menubar widget */
.widget-menubar>box>.menu-button-bar>button {
    border: none;
    background: transparent;
    background: red;
}

/* .AnyName { Name defined in config after #
 *   background-color: @noti-bg;
 *   padding: 8px;
 *   margin: 8px;
 *   border-radius: 12px;
 * }
 * 
 * .AnyName>button {
 *   background: transparent;
 *   border: none;
 * }
 * 
 * .AnyName>button:hover {
 *   background-color: @noti-bg-hover;
 * }
 */

.topbar-buttons>button {
    /* Name defined in config after # */
    border: none;
    background: transparent;
    background: blue;
}

/* Volume widget */

.widget-volume {
    background-color: @noti-bg;
    padding: 8px;
    margin: 8px;
    border-radius: 12px;
}

/* Backlight widget */
.widget-backlight {
    background-color: @noti-bg;
    padding: 8px;
    margin: 8px;
    border-radius: 12px;
}

/* Title widget */
.widget-inhibitors {
    margin: 8px;
    font-size: 1.5rem;
}

.widget-inhibitors>button {
    font-size: initial;
    color: white;
    text-shadow: none;
    background: @noti-bg;
    border: 1px solid @noti-border-color;
    box-shadow: none;
    border-radius: 12px;
}

.widget-inhibitors>button:hover {
    background: @noti-bg-hover;
}