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