// Include base styling.
@import 'shared-base';

.incognito-mode {
  $window_color: $incognito_color;
  @import 'Adwaita-colored-window';
}

.automation-mode {
  $window_color: $automation_color;
  @import 'Adwaita-colored-window';
}

@import 'drawing';

@mixin close_button($fg:$fg_color) {
  background: none;
  border: none;
  box-shadow: none;
  -gtk-icon-shadow: none;
  text-shadow: none;
  min-width: 24px;
  min-height: 24px;
  border-radius: 99px;
  color: inherit;
  padding: 0;
  margin: 2px;

  &:hover {
    background: gtkalpha($fg, .15);

    &:active {
      background: gtkalpha(black, .2);
    }
  }
}

@if not $high_contrast {
  .url_entry:not(:hover):not(:focus) {
    background-color: transparentize($base_color, 0.25);
  }
}

.bookmark-tag-widget {
  border-radius: 5px;

  button {
    @include close_button();
  }
}

.bookmark-tag-widget-selected button {
  @include close_button($selected_fg_color);
}

@keyframes needs_attention_keyframes {
    0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: themecolor(borders); }
    /* can't do animation-direction, so holding the color on two keyframes */
    30% {background-image: linear-gradient(to bottom, themecolor(theme_base_color), themecolor(theme_base_color), themecolor(theme_base_color)); border-color: themecolor(theme_fg_color); }
    90% {background-image: linear-gradient(to bottom, themecolor(theme_base_color), themecolor(theme_base_color), themecolor(theme_base_color)); border-color: themecolor(theme_fg_color); }
    100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: themecolor(borders); }
}

.epiphany-downloads-button-needs-attention {
  animation: needs_attention_keyframes 2s ease-in-out;
}

.epiphany-downloads-button-needs-attention-multiple {
  animation: needs_attention_keyframes 3s ease-in-out;
  animation-iteration-count: 3;
}

#title-box-container {
  color: gtkalpha(themecolor(theme_fg_color), 0.2);

  > clamp {
    color: themecolor(theme_fg_color);

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

$menu_selected_color: if($variant == 'light', darken($bg_color, 6%), darken($bg_color, 8%));

@if $high_contrast {
  $menu_selected_color: darken($bg_color,10%);
}

.pages-list {
  margin: 5px;

  row {
    min-height: 30px;
    padding: 3px;
    border-radius: 5px;
    -gtk-outline-radius: 5px;
    border: none;
    color: $fg_color;
    transition: none;
    box-shadow: none;

    &:not(:last-child) {
      margin-bottom: 2px;
    }

    &:selected {
      background: $menu_selected_color;
    }

    &:hover {
      background: darken($menu_selected_color,5%);
    }

    .close-button {
      @include close_button();

      #pages-view & {
        min-width: 36px;
        min-height: 36px;
      }
    }
  }
}