@import "../colors";
@import '../../variables';

.notification-card-container.menu {
  margin: 0em;
  min-width: 30.5em;
  min-height: 48em;
  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
  border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
  border-radius: 0.7em;
  margin-right: 0.45em;

  .window-content.notificationsmenu-window {
    margin-right: 0.50em;
  }

  .menu-content-container.notifications {
    margin: 1em;
    margin-bottom: 0em;
    min-height: 4em;
  }

  .notification-menu-controls {
    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
    margin: 1em 1em;
    margin-bottom: 0.5em;
    border-radius: 0.4em;
    padding: 0.4em 0.75em;
  }

  .notification-card.menu {
    background: $notification-background;
    min-width: 26.2em;
    border: 0.15em solid $notification-border;
    border-radius: 0em;
    border-bottom-left-radius: 0.4em;
    border-top-left-radius: 0.4em;
    margin: 0em;
  }

  .notification-card-content-container {
    margin-bottom: 0.65em;
    &:last-child {
      margin-bottom: 1em;
    }
  }
  .notification-card-content {
    margin-bottom: 0.25em;
  }

  .menu-label.notifications {
    margin: 0em;
    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
  }

  .menu-separator.notification-controls {
    min-width: 0.1em;
    background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-divider, $bar-menus-menu-notifications-switch_divider);
    margin: 0em 1em;
  }

  .menu-switch.notifications {
    background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);

    &:checked {
      background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
    }

    slider {
      background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
    }

    &:hover {
      trough {
        background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);
      }

      slider {
        background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
      }
    }

    &:active {
      background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
    }
  }

  .clear-notifications-button {
    margin-right: 0.3em;

    &:hover label {
      color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5);
    }
  }

  .clear-notifications-label {
    color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
    font-size: 1.5em;
  }
}

.notification-label-container {
  margin-bottom: 8em;

  label {
    color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label);
  }

  .bell {
    font-size: 10em;
  }
  .message {
    font-size: 1.5em;
  }
}

.close-notification-button.menu {
  background: $notification-close_button-background;
  color: $notification-close_button-label;
  min-width: 2.1em;
  border-radius: 0rem 0.35em 0.35em 0em;

  label {
    font-size: 1.5em;
  }

  &:hover {
    background: transparentize($notification-close_button-background ,0.5);
  }
}