/* TOP BAR */

#panel {
  background-color: $panel_bg_color;
  /* transition from solid to transparent */
  transition-duration: 250ms;
  font-weight: bold;
  height: em($menuitem_size);
  min-height: $small_size;
  max-height: $menuitem_size;
  box-shadow: $shadow_2;
  
  &.solid {
    box-shadow: none;
  }

  //&:overview, // <- this breaks the overview transition on the primary display. See https://github.com/pocillo-os/gtk-theme/issues/93
  &.unlock-screen,
  &.login-screen,
  &.lock-screen {
    background-color: rgba($panel_bg_color, 0.5);
    border: none;
    box-shadow: none;
  }

  #panelLeft, #panelCenter { // spacing between activities<>app menu and such
    spacing: 0;
  }

  .panel-corner {
    -panel-corner-radius: $panel_corner_radius + 2px; //FIXME: Corner radius is
    -panel-corner-background-color: $panel_bg_color;  //       really broken.
    -panel-corner-border-width: 0;
    -panel-corner-border-color: transparent;

    &:active, &:overview, &:focus {
      -panel-corner-border-color: $accent_color;
    }

    &.lock-screen, &.login-screen, &.unlock-screen {
      -panel-corner-radius: 0;
      -panel-corner-background-color: transparent;
      -panel-corner-border-color: transparent;
    }
  }

  .panel-button {
    -natural-hpadding: 12px;
    -minimum-hpadding: 6px;
    font-weight: bold;
    color: $inverse_secondary_fg_color;
    text-shadow: none;
    transition-duration: $longer_duration;

    .app-menu-icon {
      -st-icon-style: symbolic;
      margin-left: 4px;
      margin-right: 4px;
      //dimensions of the icon are hardcoded
    }

    .system-status-icon,
    .app-menu-icon > StIcon,
    .popup-menu-arrow {
      icon-shadow: none;
    }

    &:hover {
      color: $inverse_fg_color;
      text-shadow: none;

      .system-status-icon,
      .app-menu-icon > StIcon,
      .popup-menu-arrow {
        icon-shadow: none;
      }
    }

    &:active, &:overview, &:focus, &:checked {
      // Trick due to St limitations. It needs a background to draw
      // a box-shadow
      background-color: rgba($bg_color, 0.01);
      box-shadow: inset 0 -2px 0px $accent_color;
      color: $inverse_fg_color;

      & > .system-status-icon { icon-shadow: none; }
    }

    .system-status-icon { icon-size: em(16px); padding: 0 4px; }
    .unlock-screen &,
    .login-screen &,
    .lock-screen & {
      color: $inverse_secondary_fg_color;
      &:focus, &:hover, &:active { color: $inverse_fg_color; }
    }
  }

  .panel-status-indicators-box,
  .panel-status-menu-box {
    spacing: 2px;
  }

  // spacing between power icon and (optional) percentage label
  .power-status.panel-status-indicators-box {
    spacing: 0;
  }

  .screencast-indicator { color: $warning_color; }

  &.solid {
    background-color: $panel_bg_color;
    /* transition from transparent to solid */
    transition-duration: 250ms;

    .panel-corner {
      -panel-corner-background-color: $panel_bg_color;
    }

    .panel-button {
      color: $inverse_secondary_fg_color;
      text-shadow: none;

      &:hover {
        color: $inverse_fg_color;
      }
    }

    .system-status-icon,
    .app-menu-icon > StIcon,
    .popup-menu-arrow {
      icon-shadow: none;
    }
  }
}

// calendar popover
#calendarArea {
  padding: 8px 16px;
}

.calendar {
  margin-bottom: 0;
}

  .calendar,
  .datemenu-today-button,
  .datemenu-displays-box,
  .message-list-sections {
    margin: 0 8px;
  }

  .datemenu-calendar-column { spacing: 8px; }
  .datemenu-displays-section { padding-bottom: 0; }
  .datemenu-displays-box { spacing: 8px; }

  .datemenu-calendar-column {
    border: 0 solid $border_color;
    &:ltr { border-left-width: 0; }
    &:rtl { border-right-width: 0; }
  }

  .datemenu-today-button,
  .world-clocks-button,
  .weather-button,
  .events-section-title {
    min-height: $menuitem_size - 4px * 2;
    padding: 4px 8px;
    border-radius: 2px;
  }

  .datemenu-today-button {
    min-height: $menuitem_size * 2 - 4px * 2;
  }

  .message-list-section-list:ltr {
    padding-left: 0;
  }

  .message-list-section-list:rtl {
    padding-right: 0;
  }

  .datemenu-today-button,
  .world-clocks-button,
  .weather-button,
  .events-section-title {
    &:hover,&:focus { color: $fg_color; background-color: $divider_color; }
    &:active {
      color: $fg_color;
      background-color: $track_color;
    }
  }

  .datemenu-today-button .day-label {
  }

  .datemenu-today-button .date-label {
    @include font(headline);
  }

  .world-clocks-header,
  .weather-header,
  .events-section-title {
    color: $secondary_fg_color;
    font-weight: bold;
  }

  .world-clocks-grid {
    spacing-rows: 0.4em;
  }

  .weather-box {
    spacing: 0.4em;
  }

  .calendar-month-label {
    height: $menuitem_size - 6px * 2;
    margin: 2px;
    padding: 6px 16px;
    border-radius: 2px;
    color: $fg_color;
    font-weight: bold;
    text-align: center;
    &:focus { background-color: $divider_color; }
  }

  .pager-button {
    width: $menuitem_size;
    height: $menuitem_size;
    margin: 2px;
    border-radius: 100px;
    background-color: transparent;
    color: $fg_color;
    &:hover, &:focus { background-color: $divider_color; }
    &:active { background-color: $track_color; }
  }

    .calendar-change-month-back { //arrow back
      background-image: url("assets/calendar-arrow-left.svg");
      &:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
    }
    .calendar-change-month-forward { //arrow foreward
      background-image: url("assets/calendar-arrow-right.svg");
      &:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
    }

  .calendar-day-base {
    @include font(caption);
    text-align: center;
    width: $menuitem_size; height: $menuitem_size;
    padding: 0;
    margin: 2px;
    border-radius: 100px;
    &:hover,&:focus { background-color: $divider_color; }
    &:active {
      color: inherit;
      background-color: $track_color;
      border-color: transparent; //avoid jumparound due to today
    }
    &:selected {
      color: $inverse_fg_color;
      background-color: $accent_color;
      border-color: transparent; //avoid jumparound due to today
    }
    &.calendar-day-heading {  //day of week heading
      width: $menuitem_size; height: $menuitem_size - 7px;
      margin-top: 2px;
      padding: 7px 0 0;
      border-radius: 100px;
      background-color: transparent;
      color: $hint_fg_color;
      @include font(caption);
      font-weight: bold;
      text-align: center;
    }
  }
    .calendar-day { //border collapse hack - see calendar.js
      border-width: 0;
    }
    .calendar-day-top { border-top-width: 0; }
    .calendar-day-left { border-left-width: 0; }
    .calendar-work-day {

    }
    .calendar-nonwork-day {
      color: $fg_color;
    }
    .calendar-today {
      font-weight: bold !important;
      //color: $fg_color;
      //background-color: transparent;
      border: none;
    }
    .calendar-day-with-events {
      color: $primary_color;
      font-weight: normal;
      text-decoration: underline;
      background-image: none;
    }
    .calendar-other-month-day {
      color: $disabled_secondary_fg_color;
      opacity: 0.5;
    }
    .calendar-week-number {
      width: $menuitem_size; height: $menuitem_size - 7px;
      margin: 2px;
      padding: 7px 0 0;
      border-radius: 100px;
      background-color: transparent;
      color: $hint_fg_color;
      font-size: inherit;
      font-weight: bold;
      text-align: center;
    }

    /* Message list */
    .message-list {
      width: 420px;
    }

      .message-list-clear-button.button {
        background-color: transparent;
        &:hover,&:focus { background-color: $divider_color; }
        &:active { background-color: $track_color; }
        margin: 8px 8px 0;
      }

      .message-list-sections {
        spacing: 8px;
      }

      .message-list-section,
      .message-list-section-list {
        spacing: 8px;
      }

      .message {
        min-height: $menuitem_size * 2;
        background-color: transparent;
        &:hover,&:focus { background-color: $divider_color; }
        &:active { background-color: $track_color; }
        border-radius: 2px;
      }

        .message-icon-bin {
          padding: 8px 0px 8px 8px;
          &:rtl { padding: 8px 8px 8px 0px; }
        }

        .message-icon-bin > StIcon {
          color: $fg_color;
          icon-size: 16px;
          -st-icon-style: requested;
          margin: 4px 0px 4px 4px;
          &:rtl { margin: 4px 4px 4px 0px; }
        }

        .message-secondary-bin {
          padding: 0 8px;
        }

        .message-secondary-bin > .event-time {
          min-height: $small_size - 2px;
          padding-top: 2px;
          color: $secondary_fg_color;
          font-size: 1em;
          padding-bottom: 0;
        }

        .message-secondary-bin > StIcon {
          icon-size: 16px;
        }

        .message-title {
          min-height: $small_size - 2px;
          padding-top: 2px;
          color: $fg_color;
          font-weight: bold;
          font-size: 1em;
        }

        .message-content {
          min-height: $menuitem_size * 2 - 8px * 2;
          padding: 8px;
          color: $secondary_fg_color;
          font-size: 1em;
        }

        .message-content * > StIcon {
          icon-size: 16px;
          border-radius: 16px;
          padding: ($small_size - 16px) / 2;
          color: $secondary_fg_color;
        }

        .message-content *:hover > StIcon,
        .message-content *:focus > StIcon {
          color: $fg_color;
          background-color: $divider_color;
        }

        .message-content *:active > StIcon {
          color: $fg_color;
          background-color: $track_color;
        }

        .message-media-control {
          margin: 16px 0;
          padding: 8px;
          border-radius: 100px;
          color: $secondary_fg_color;
          &:hover,&:focus { color: $fg_color; background-color: $divider_color; }
          &:active { color: $fg_color; background-color: $track_color; }
          &:insensitive { color: $disabled_secondary_fg_color; }

          &:last-child:ltr { margin-right: 16px; padding-right: 8px; }
          &:last-child:rtl { margin-left: 16px; padding-left: 8px; }
        }

        .media-message-cover-icon {
          icon-size: 32px !important;
          margin: 8px 0px 8px 4px !important;
          &:rtl { margin: 8px 4px 8px 0px !important; }
          &.fallback {
            icon-size: 16px !important;
            padding: 8px;
            border: none;
            border-radius: 2px;
            background-color: $divider_color;
            color: $hint_fg_color;
          }
        }


// a little unstructured mess:

.system-switch-user-submenu-icon.user-icon {
  icon-size: 20px;
  padding: 0 2px;
}
.system-switch-user-submenu-icon.default-icon {
  icon-size: 16px;
  padding: 0 4px;
}

#appMenu {
  spinner-image: url("process-working.svg");
  spacing: 4px;

  .label-shadow { color: transparent; }
}

.aggregate-menu {
  min-width: 280px;
  .popup-menu-icon { padding: 0 4px; }
}

.system-menu-action {
  color: $secondary_fg_color;
  border-radius: 100px; /* wish we could do 50% */
  padding: ($large_size - 16px) / 2;
  border: none;

  &:hover, &:focus {
    background-color: $divider_color;
    color: $fg_color;
    border: none;
    padding: ($large_size - 16px) / 2;
  }
  &:active { background-color: $track_color; color: $fg_color; }

  & > StIcon { icon-size: 16px; }
}

//Activities Ripples
.ripple-box {
  width: 48px;
  height: 48px;
  background-image: url("assets/corner-ripple-ltr.svg");
  background-size: contain;
}

.ripple-box:rtl {
  background-image: url("assets/corner-ripple-rtl.svg");
}

// not really top bar only
.popup-menu-arrow { width: 16px; height: 16px; }
.popup-menu-icon { icon-size: em(16px); }

//close buttons

.window-close {
  transition-duration: 0ms; // FIXME: unless disable the transition, button will distort when hovering
  height: $medium_size;
  width: $medium_size;
  -shell-close-overlap: $medium_size / 2;
  -st-background-image-shadow: $shadow_1;
  background-image: url("assets/window-close.svg");
  background-size: $medium_size;

  &:hover {
    -st-background-image-shadow: $shadow_2;
    background-image: url("assets/window-close.svg");
  }
  &:active { background-image: url("assets/window-close-active.svg"); }

  // For backward compatibility of 3.26.0
  &:rtl { -st-background-image-shadow: $shadow_1; }
  &:rtl:hover { -st-background-image-shadow: $shadow_2; }
}
