@import 'definitions';

// floating status bar
.floating-bar {
  background-color: themecolor(theme_base_color);
  border-width: 1px;
  border-style: solid solid none;
  border-color: themecolor(borders);
  border-radius: 3px 3px 0 0;

  &.left {
    border-left-style: none;
    border-top-left-radius: 0;
  }

  &.right {
    border-right-style: none;
    border-top-right-radius: 0;
  }

  &:backdrop {
    background-color: themecolor(theme_unfocused_base_color);
    border-color: themecolor(unfocused_borders);
  }
}

#title-box-container {
  transition: background 200ms ease-out;

  .incognito-mode & {
    background: -gtk-icontheme($incognito_icon) 16px 0 / 64px 64px no-repeat;

    &:backdrop {
      background-image: cross-fade(50% -gtk-icontheme($incognito_icon), image(transparent));
    }
  }
}

// automation mode
.automation-mode {
  headerbar {
    background-color: $automation_color;
    color: rgba(0, 0, 0, 0.35);
  }
}

// entry icons
.entry_icon_box {
  margin-left: 2px;
  margin-right: 5px;

  &:dir(rtl) {
    margin-left: 5px;
    margin-right: 2px;
  }
  // Make the buttons as unnoticable as possible, to make it look like you're
  // really clicking icons here, while allowing to focus them with the Tab key.
  > button {
    box-shadow: none;
    border: transparent;
    background: transparent;
    padding: 0px;
    -gtk-icon-shadow: none;
    // Makes the focus outline slightly larger so it is more "button-like"
    outline-offset: -1px;

    &:hover:not(:backdrop) .entry_icon {
      opacity: 1;
    }
  }
}

.entry_icon {
  color: themecolor(theme_fg_color);
  margin: 0 4px;
  opacity: .8;

  &:active {
    color: themecolor(theme_selected_bg_color);
  }

  &:backdrop {
    color: themecolor(theme_unfocused_fg_color);
  }

  // Reader mode
  &.selected {
    color: themecolor(theme_selected_bg_color);
  }

  // Bookmarks
  &.starred {
    color: orange;
  }
}

.bookmarks-row {
  button {
    opacity: 0.25;
  }

  &:hover {
    button {
      opacity: 1;
    }
  }
}

.bookmark-tag-widget {
  padding-left: 8px;
  background-color: rgba(0, 0, 0, .1);
  border-radius: 3px;

  label {
    padding-left: 8px;
    padding-right: 8px;
  }

  image,
  label,
  button:hover image {
    // FIXME: This should be theme_text_color, but HighContrast doesn't export it
    color: themecolor(theme_fg_color);
  }
}

.bookmark-tag-widget-selected {
  background-color: themecolor(theme_selected_bg_color);

  image,
  label,
  button:hover image {
    color: themecolor(theme_selected_fg_color);
  }
}

// "Press $KEY to exit fullscreen" overlay text
#fullscreen-popup {
  padding: 12px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
}

.url_progress {
  border: none;
  background-color: transparent;
  background-image: none;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 6px;

  progress {
    background-color: themecolor(theme_selected_bg_color);
    background-image: none;
    border: none;
    min-height: 2px;
  }

  trough {
    border: none;
    background-color: transparent;
    background-image: none;
  }
}

.tab-attention {
  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(themecolor(theme_selected_bg_color)), to(transparent));
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.tab-arrow-up-attention {
  arrow.up {
    background-color: themecolor(theme_selected_bg_color);
  }
}

.tab-arrow-down-attention {
  arrow.down {
    background-color: themecolor(theme_selected_bg_color);
  }
}

.page-menu-contents {
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 12px;
}

.search-entry-occurrences-tag {
  background: none;
  color: gtkalpha(themecolor(theme_fg_color), 0.5);
  box-shadow: none;
  border: none;
  margin: 2px;
  padding: 2px;

  &:backdrop {
    color: gtkalpha(themecolor(theme_unfocused_fg_color), 0.5);
  }
}

dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row > grid {
  margin-left: 3px;

  .title, .subtitle {
    margin-left: 6px;
  }
}

.download_progress {
  progress {
    min-height: 2px;
  }

  trough {
    min-width: 14px;
  }
}

.pages-list {
  background: none;
}

// Preferences languages list drag & drop style classes
.draggable {
  &.drag-icon {
    background: white;
    border: 1px solid black;
  }

  &.drag-row {
    color: gray;
    background: gtkalpha(gray, 0.2);
  }
}

fullscreenbox > flap {
  > dimming,
  > outline,
  > border {
    min-height: 0;
    min-width: 0;
    background: none;
  }

  > shadow {
    min-height: 9px;
    min-width: 9px;
    background: linear-gradient(to bottom, gtkalpha(black, .1), gtkalpha(black, .0));
  }
}