@function themecolor($s) {
  @return unquote("@" + "#{$s}");
}

$variant: 'light';

@import 'colors';
@import 'drawing';

// menu button fix, yeah this is ugly

button.active-menu {
  @include button(active);

  &:backdrop { @include button(active-backdrop); }
}

// 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);
  }
}


// incognito mode

//$incognito_color: #c5cfd8;
$incognito_color: #cbd2d9;
$incognito_icon: 'user-not-tracked-symbolic';
$edge_color: lighten($incognito_color, 13%);

.incognito-mode {
  &.titlebar {
    @include headerbar_fill($incognito_color, $edge_color, -gtk-icontheme($incognito_icon) 160px 0 / 64px 64px no-repeat);

    border-color: _border_color($incognito_color);

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

    > * {
      color: $fg_color;

      &:backdrop { color: $backdrop_fg_color }
    }

    &:backdrop {
      background-image: -gtk-icontheme($incognito_icon), image($incognito_color);
      box-shadow: inset 0 1px $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, $incognito_color);

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

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

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

      &:active, &:checked, &#ephy-page-menu-button.active-menu { @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);
        }
      }

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

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

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

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

/* Bookmarks */
.titlebar entry.starred image.right {
  color: #fce94f;
}

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

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

$close_button_fg_color: lighten($fg_color, 10%);
.bookmark-tag-widget {
  padding-left: 8px;
  background-color: darken($bg_color, 10%);

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

  button {
    background: none;
    border: none;
    box-shadow: none;

    &:last-child {
      image {
        color: $close_button_fg_color;
      }

      &:hover {
        image {
          border: 1px solid;
          border-radius: 3px;
          @include button(normal, $bg_color, $close_button_fg_color);
          @include button(hover, $bg_color, $close_button_fg_color);
        }
      }

      &:active {
        image {
          @include button(normal, $bg_color, $close_button_fg_color);
          @include button(active, $bg_color, $close_button_fg_color);
        }
      }
    }
  }
}

.bookmark-tag-widget-selected {
  background-color: $selected_bg_color;

  image {
    color: white;
  }

  label {
    color: white;
  }

  button {
    &:last-child {
      image {
        color: white;
      }

      &:hover {
        image {
          @include button(normal, $selected_bg_color, white);
          @include button(hover, $selected_bg_color, white);
        }
      }

      &:active {
        image {
          @include button(normal, $selected_bg_color, white);
          @include button(active, $selected_bg_color, white);
        }
      }
    }
  }
}

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