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

.incognito-mode {
  headerbar {
    @include headerbar_fill(darken($incognito_color, 10%), $incognito_edge_color, -gtk-icontheme($incognito_icon) 180px 0 / 64px 64px no-repeat);

    border-color: _border_color($incognito_borders_color);

    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon

    &:backdrop {
      background-image: -gtk-icontheme($incognito_icon), image($incognito_color);
      box-shadow: inset 0 1px $incognito_edge_color;
      color: transparentize($incognito_backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
    }
  }

  actionbar {
    background: $incognito_color;

    > revealer > box {
      border-color: $incognito_borders_color;
    }
  }

  notebook > header {
    border-color: $incognito_borders_color;
    background-color: $incognito_dark_fill;

    &:backdrop {
      border-color: $incognito_backdrop_borders_color;
      background-color: $incognito_backdrop_dark_fill;
    }

    > tabs > tab {
      color: $incognito_insensitive_fg_color;

      button.flat {
        &:hover { color: currentColor; }
        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
      }

      &:hover {
        color: mix($incognito_insensitive_fg_color, $fg_color, 50%);
        border-color: transparentize($incognito_borders_color, 0.7);
        background-color: transparentize($incognito_color, 0.8);
        box-shadow: inset 0 -3px $incognito_borders_color;
      }

      &:backdrop {
        color: mix($incognito_backdrop_fg_color, $incognito_backdrop_bg_color, 60%);
        border-color: transparent;
        background-color: transparent;
        box-shadow: none;
      }

      &:checked {
        color: $fg_color;
        border-color: transparentize($incognito_borders_color, 0.5);
        background-color: transparentize($incognito_color, 0.5);
        box-shadow: inset 0 -3px $selected_bg_color;

        &:hover { background-color: transparentize($incognito_color, 0.3); }
      }

      &:backdrop:checked {
        color: $incognito_backdrop_fg_color;
        border-color: $incognito_backdrop_borders_color;
        background-color: $incognito_backdrop_bg_color;
      }
    }

    > tabs > arrow:active {
      @include button(active, $incognito_color);
    }
  }

  headerbar, actionbar, notebook > header {
    > * {
      color: $fg_color;

      &:backdrop { color: $incognito_backdrop_fg_color }
    }

    button { // changing the headerbar background color requires changing widget borders accordingly
      @include button(normal, $incognito_color);

      &.flat, &.titlebutton { @include button(undecorated); }

      &.titlebutton { @include _button_text_shadow($fg_color, $incognito_color); }

      &:hover { @include button(hover, $incognito_color); }

      &:active, &:checked { @include button(active, $incognito_color); }

      &:disabled { @include button(insensitive, $incognito_color); }

      &:backdrop {
        @include button(backdrop, $incognito_color);
        border-color: _border_color($incognito_color);

        &:active {
          @include button(backdrop-active, $incognito_color);
          border-color: _border_color($incognito_color);
        }

        &:disabled {
          @include button(backdrop-insensitive, $incognito_color);
          border-color: _border_color($incognito_color);
        }
      }

      &:checked {
        background: if($variant == 'light', image(darken($incognito_color, 17%)), image(darken($incognito_color, 9%)));
        border-color: darken($incognito_borders_color, 3%);
        border-top-color: darken($incognito_borders_color, 8%);
        &:backdrop {
          @include button(backdrop-active, $incognito_color);
        }
      }

      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
    }

    entry {
      border-color: _border_color($incognito_borders_color);

      &:focus {
        border-color: entry_focus_border($selected_bg_color);
        box-shadow: entry_focus_shadow($selected_bg_color);
      }

      &:backdrop { box-shadow: none; }
    }
  }
}

.automation-mode {
  headerbar {
    @include headerbar_fill($automation_color, $automation_edge_color);

    border-color: _border_color($automation_color);

    color: transparentize($fg_color, 0.8); // this is the color of the overlayed icon

    > * {
      color: $fg_color;

      &:backdrop { color: $backdrop_fg_color }
    }

    &:backdrop {
      box-shadow: inset 0 1px $automation_edge_color;
      color: transparentize($backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
    }

    button { // changing the headerbar background color requires changing widget borders accordingly
      @include button(normal, $automation_color);

      &.flat, &.titlebutton { @include button(undecorated); }

      &.titlebutton { @include _button_text_shadow($fg_color, $automation_color); }

      &:hover { @include button(hover, $automation_color); }

      &:active, &:checked { @include button(active, $automation_color); }

      &:disabled { @include button(insensitive, $automation_color); }

      &:backdrop {
        @include button(backdrop, $automation_color);
        border-color: _border_color($automation_color);

        &:active {
          @include button(backdrop-active, $automation_color);
          border-color: _border_color($automation_color);
        }

        &:disabled {
          @include button(backdrop-insensitive, $automation_color);
          border-color: _border_color($automation_color);
        }
      }

      &.flat:backdrop, &.titlebutton:backdrop { @include button(undecorated); }
    }

    entry {
      border-color: _border_color($automation_color);

      &:focus {
        border-color: entry_focus_border($selected_bg_color);
        box-shadow: entry_focus_shadow($selected_bg_color);
      }

      &:backdrop { box-shadow: none; }
    }
  }
}

$close_button_fg_color: if($variant == 'light', lighten($fg_color, 10%), darken($fg_color, 10%));
@mixin close_button($bg:$bg_color, $fg:$close_button_fg_color) {
  background: none;
  border: none;
  box-shadow: none;

  &:last-child {
    image {
      color: $fg;
      border: 1px solid transparent;
      border-radius: 5px;
    }

    &:hover image {
      @include button(normal, $bg, $fg);
      @include button(hover, $bg, $fg);
    }

    &:active image {
      @include button(normal, $bg, $fg);
      @include button(active, $bg, $fg);
    }
  }
}

.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_bg_color, $selected_fg_color);
}

.page-row-close-button {
  @include close_button();

  row:selected & {
    @include close_button($selected_bg_color, $selected_fg_color);
  }

  row.narrow & image {
    padding: 6px;
  }
}

@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;
}

// Pinned tabs
.main-notebook {
  tab:not(.reorderable-page) {
    min-width: 16px;
  }

  header {
    &.top,
    &.bottom {
      tab {
        border-style: none solid;
      }
    }

    &.left,
    &.right {
      tab {
        border-style: solid none;
      }
    }
  }
}

window:not(.incognito-mode) .main-notebook tab:not(.reorderable-page) {
  &:hover {
    border-color: transparentize($borders_color, 0.7);
    background-color: transparentize($bg_color, 0.8);
  }

  &:backdrop {
    border-color: transparent;
    background-color: transparent;
  }

  &:checked {
    border-color: transparentize($borders_color, 0.5);
    background-color: transparentize($bg_color, 0.5);

    &:hover { background-color: transparentize($bg_color, 0.3); }
  }

  &:backdrop:checked {
    border-color: $backdrop_borders_color;
    background-color: $backdrop_bg_color;
  }
}

.tab-attention {
  $_dot_color: if($variant=='light', $selected_bg_color,
                                   lighten($selected_bg_color,15%));
  background-image: -gtk-gradient(radial,
                                  center center, 0,
                                  center center, 0.5,
                                  to($_dot_color),
                                  to(transparent));
}
