@function gtkalpha($c,$a) {
  @return unquote("alpha(#{$c},#{$a})");
}

/***********
 * Palette *
 ***********/

$blue_1: #99c1f1;
$blue_2: #62a0ea;
$blue_3: #3584e4;
$blue_4: #1c71d8;
$blue_5: #1a5fb4;
$green_1: #8ff0a4;
$green_2: #57e389;
$green_3: #33d17a;
$green_4: #2ec27e;
$green_5: #26a269;
$yellow_1: #f9f06b;
$yellow_2: #f8e45c;
$yellow_3: #f6d32d;
$yellow_4: #f5c211;
$yellow_5: #e5a50a;
$orange_1: #ffbe6f;
$orange_2: #ffa348;
$orange_3: #ff7800;
$orange_4: #e66100;
$orange_5: #c64600;
$red_1: #f66151;
$red_2: #ed333b;
$red_3: #e01b24;
$red_4: #c01c28;
$red_5: #a51d2d;
$purple_1: #dc8add;
$purple_2: #c061cb;
$purple_3: #9141ac;
$purple_4: #813d9c;
$purple_5: #613583;
$brown_1: #cdab8f;
$brown_2: #b5835a;
$brown_3: #986a44;
$brown_4: #865e3c;
$brown_5: #63452c;
$light_1: #ffffff;
$light_2: #f6f5f4;
$light_3: #deddda;
$light_4: #c0bfbc;
$light_5: #9a9996;
$dark_1: #77767b;
$dark_2: #5e5c64;
$dark_3: #3d3846;
$dark_4: #241f31;
$dark_5: #000000;

// Sass thinks we're using the colors in the variables as strings and may shoot
// warning, it's innocuous and can be defeated by using #{$var}.

@define-color blue_1 #{$blue_1};
@define-color blue_2 #{$blue_2};
@define-color blue_3 #{$blue_3};
@define-color blue_4 #{$blue_4};
@define-color blue_5 #{$blue_5};
@define-color green_1 #{$green_1};
@define-color green_2 #{$green_2};
@define-color green_3 #{$green_3};
@define-color green_4 #{$green_4};
@define-color green_5 #{$green_5};
@define-color yellow_1 #{$yellow_1};
@define-color yellow_2 #{$yellow_2};
@define-color yellow_3 #{$yellow_3};
@define-color yellow_4 #{$yellow_4};
@define-color yellow_5 #{$yellow_5};
@define-color orange_1 #{$orange_1};
@define-color orange_2 #{$orange_2};
@define-color orange_3 #{$orange_3};
@define-color orange_4 #{$orange_4};
@define-color orange_5 #{$orange_5};
@define-color red_1 #{$red_1};
@define-color red_2 #{$red_2};
@define-color red_3 #{$red_3};
@define-color red_4 #{$red_4};
@define-color red_5 #{$red_5};
@define-color purple_1 #{$purple_1};
@define-color purple_2 #{$purple_2};
@define-color purple_3 #{$purple_3};
@define-color purple_4 #{$purple_4};
@define-color purple_5 #{$purple_5};
@define-color brown_1 #{$brown_1};
@define-color brown_2 #{$brown_2};
@define-color brown_3 #{$brown_3};
@define-color brown_4 #{$brown_4};
@define-color brown_5 #{$brown_5};
@define-color light_1 #{$light_1};
@define-color light_2 #{$light_2};
@define-color light_3 #{$light_3};
@define-color light_4 #{$light_4};
@define-color light_5 #{$light_5};
@define-color dark_1 #{$dark_1};
@define-color dark_2 #{$dark_2};
@define-color dark_3 #{$dark_3};
@define-color dark_4 #{$dark_4};
@define-color dark_5 #{$dark_5};

/**********
 * Avatar *
 **********/

avatar {
  border-radius: 9999px;
  font-weight: bold;

  // The list of colors to generate avatars.
  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
  // There are 8 different colors for avtars in the list if you change the number of them you
  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
  $avatarcolorlist: (
   (#cfe1f5, #83b6ec, #337fdc), // blue
   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
   (#cef8d8, #8de6b1, #29ae74), // green
   (#e6f9d7, #b5e98a, #6ab85b), // lime
   (#f9f4e1, #f8e359, #d29d09), // yellow
   (#ffead1, #ffcb62, #d68400), // gold
   (#ffe5c5, #ffa95a, #ed5b00), // orange
   (#f8d2ce, #f78773, #e62d42), // raspberry
   (#fac7de, #e973ab, #e33b6a), // magenta
   (#e7c2e8, #cb78d4, #9945b5), // purple
   (#d5d2f5, #9e91e8, #7a59ca), // violet
   (#f2eade, #e3cf9c, #b08952), // beige
   (#e5d6ca, #be916d, #785336), // brown
   (#d8d7d3, #c0bfbc, #6e6d71), // gray
  );

  @for $i from 1 through length($avatarcolorlist) {
    &.color#{$i} {
      $avatarcolor: nth($avatarcolorlist, $i);
      background-color: nth($avatarcolor, 3);
      color: white;
    }
  }

  &.contrasted { color: white; }

  &.image { background: none; }
}

/***********
 * Buttons *
 ***********/

button {
  &.image-text-button {
    @extend %image_text_button;
  }

  %opaque_button,
  &.opaque {
    @include button(suggested_destructive, $button_bg, $fg_color);
    @include focus-ring();

    // opaque buttons don't have border
    // workaround by extending background to border area
    border: 1px solid transparent;
    background-clip: border-box;

    &.flat {
      @include button(undecorated);

      color: $fg_color;
    }

    &:hover {
      background-image: image(gtkalpha(currentColor, .25));
    }

    &.keyboard-activating,
    &:active {
      background-image: image(transparentize(black, .9));
    }

    &:checked {
      background-image: image(transparentize(black, .9));

      &:hover {
        background-image: image(transparentize(black, .95));
      }

      &.keyboard-activating,
      &:active {
        background-image: image(transparentize(black, .8));
      }
    }


    &.flat {
      &:disabled {
        @include button(undecorated);

        color: $insensitive_fg_color;
      }
    }

    &:disabled {
      @include button(insensitive);

      &:active,
      &:checked { @include button(insensitive-active); }
    }

    .osd & {
      @include button(osd);

      &:hover { @include button(osd-hover); }

      &:active,
      &:checked { @include button(osd-active); }

      &:disabled { @include button(osd-insensitive); }
    }
  }

  @at-root %pill_button,
  &.pill {
    border-radius: 9999px;
  }
}

menubutton {
  &.circular > button { @extend %circular_button; }
  &.flat > button { @extend %button_basic_flat; }
  &.pill > button { @extend %pill_button; }

  &.opaque {
    background-color: $button_bg;
    color: $fg_color;

    &.circular, &.pill {
      border-radius: 9999px;
    }

    > button {
      @extend %opaque_button;

      &, &:checked {
        background-color: transparent;
        color: inherit;
      }
    }
  }
}

splitbutton {
  > separator {
    min-height: 0;
    min-width: 0;
  }

  // Since the inner button doesn't have any style classes on it,
  // we have to add them manually
  &.image-button > button {
    min-width: 24px;
    padding-left: 5px;
    padding-right: 5px;
  }

  &.text-button.image-button > button,
  &.image-text-button > button {
    padding-left: 5px;
    padding-right: 5px;

    > box {
      border-spacing: 5px;
    }
  }

  > button:dir(ltr),
  > menubutton > button:dir(rtl) {
    border-right-style: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  > button:dir(rtl),
  > menubutton > button:dir(ltr) {
    border-left-style: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  > menubutton > button:hover:not(:active):dir(ltr),
  > button:hover:not(:active):dir(ltr) + separator + menubutton > button { box-shadow: inset 1px 0 $button_border; }

  > menubutton > button:hover:not(:active):dir(rtl),
  > button:hover:not(:active):dir(rtl) + separator + menubutton > button { box-shadow: inset -1px 0 $button_border; }

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

    &:hover,
    &:active,
    &:checked {
      > button,
      > menubutton > button {
        @include button(normal);
        transition: $button_transition;

        &:hover {
          @include button(hover);
          transition: $button_transition;
          transition-duration: 500ms;
        }

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

  &.suggested-action {
    @include button(suggested_destructive, $suggested_color, $suggested_fg_color);
  }

  &.destructive-action {
    @include button(suggested_destructive, $destructive_color, $destructive_fg_color);
  }

  &.opaque {
    @include button(suggested_destructive, $button_bg, $fg_color);
  }

  &.suggested-action,
  &.destructive-action,
  &.opaque {
    > button, > menubutton > button {
      @extend %opaque_button;

      &, &:checked {
        color: inherit;
        background-color: transparent;
      }
    }

    $_separator_color: gtkalpha(currentColor, 0.55);
    > menubutton > button {
      &:dir(ltr) { box-shadow: inset 1px 0 $_separator_color; }
      &:dir(rtl) { box-shadow: inset -1px 0 $_separator_color; }
    }
  }

  > menubutton > button > arrow.none {
    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
  }
}

buttoncontent {
  border-spacing: 5px;

  > label {
    &:dir(ltr) { padding-right: 7px; }
    &:dir(rtl) { padding-left: 7px; }
  }

  .arrow-button > box > &,
  splitbutton > button > & {
    > label {
      &:dir(ltr) { padding-right: 0; }
      &:dir(rtl) { padding-left: 0; }
    }
  }
}

/***************************
 * Selection mode checkbox *
 ***************************/

checkbutton.selection-mode check {
  -gtk-icon-size: 40px;
  -gtk-icon-source: -gtk-scaled(url("assets/checkbox-selectionmode#{$asset_suffix}.png"),
                                url("assets/checkbox-selectionmode#{$asset_suffix}@2.png"));

  &:checked {
    -gtk-icon-source: -gtk-scaled(url("assets/checkbox-checked-selectionmode#{$asset_suffix}.png"),
                                url("assets/checkbox-checked-selectionmode#{$asset_suffix}@2.png"));
  }
}

/******************
 * Flat headerbar *
 ******************/

//FIXME Needs full restyle for headerbar widgets
headerbar.flat {
  background: none;
  box-shadow: none;
  border-bottom-width: 0;
  color: inherit;
}

/******************
 * AdwWindowTitle *
 ******************/

headerbar,
windowtitle {
  .title {
    padding-left: 12px;
    padding-right: 12px;
    font-weight: normal;
  }

  .subtitle {
    font-size: smaller;
    padding-left: 12px;
    padding-right: 12px;
    @extend .dim-label;
  }
}

/**********
 * Labels *
 **********/

.accent {
  color: $suggested_color;
}

.success {
  color: $success_color;
}

.warning {
  color: $warning_color;
}

.error {
  color: $error_color;
}

/****************
 * AdwActionRow *
 ****************/

row {
  label.subtitle {
    font-size: smaller;
    @extend .dim-label;
  }

  > box.header {
    margin-left: 10px;
    margin-right: 10px;
    min-height: 50px;

    > .icon:disabled {
      color: $insensitive_fg_color;
    }

    > box.title {
      margin-top: 5px;
      margin-bottom: 5px;
      border-spacing: 3px;
    }
  }
}

/***************
 * AdwComboRow *
 ***************/

row.combo {
  image.dropdown-arrow:disabled {
    color: $insensitive_fg_color;
  }

  listview.inline {
    background: none;
    border: none;
    box-shadow: none;
    color: inherit;

    &, &:disabled {
      background: none;
      color: inherit;
    }
  }

  popover > contents {
    min-width: 120px;
  }
}

/******************
 * AdwExpanderRow *
 ******************/

@mixin margin-start($margin) {
  &:dir(ltr) {
    margin-left: $margin;
  }

  &:dir(rtl) {
    margin-right: $margin;
  }
}

%boxed_list_row {
  @include focus-ring();

  border: 1px solid $borders_color;
  border-bottom-width: 0;
  transition: 200ms $ease-out-quad;

  &:not(:selected).activatable {
    &:hover {
      background-color: if($variant != 'dark', mix($base_color, black, 95%), mix($base_color, white, 97%));
    }

    &:active {
      background-color: mix($bg_color, $base_color);
    }
  }
}

row.expander {
  // Drop transparent background on expander rows to let nested rows handle it,
  // avoiding double highlights.
  background: none;
  padding: 0px;

  > box > list {
    background: none;
    color: inherit;
  }

  list.nested {
    background-color: mix($bg_color, $base_color);
    color: inherit;
  }

  list.nested > row {
    @extend %boxed_list_row;
  }

  // AdwExpanderRow arrow rotation

  image.expander-row-arrow {
    transition: 200ms $ease-out-quad;
    @include margin-start(5px);
  }

  &:checked image.expander-row-arrow {
    -gtk-icon-transform: rotate(0turn);
  }

  &:not(:checked) image.expander-row-arrow {
    @extend .dim-label;

    &:dir(ltr) {
      -gtk-icon-transform: rotate(-0.25turn);
    }

    &:dir(rtl) {
      -gtk-icon-transform: rotate(0.25turn);
    }
  }

  &:checked image.expander-row-arrow:not(:disabled) {
    color: $selected_bg_color;
  }

  .osd &:checked image.expander-row-arrow:not(:disabled) {
    color: inherit;
  }

  image.expander-row-arrow:disabled {
    color: $insensitive_fg_color;
  }
}

/*****************
 * Boxed Lists *
 *****************/

// Deprecated: use .boxed-list instead
list.content,
list.boxed-list {
  > row {
    // Regular rows and expander header rows background
    &, &.expander row.header {
      @extend %boxed_list_row;
    }

    &.expander {
      border: none;
    }

    // Rounded top
    &:first-child {
      &, &.expander row.header {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }
    }

    // Rounded bottom
    &:last-child {
      &,
      &.expander:not(:checked),
      &.expander:not(:checked) row.header,
      &.expander:checked list.nested,
      &.expander:checked list.nested > row:last-child {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-width: 1px;
      }
    }
  }
}

/*****************
 * Popover lists *
 *****************/

popover.menu {
  list, listview {
    background: none;
    color: inherit;

    > row {
      border-radius: 2px;
      padding: 5px $_menu_padding;
      min-height: 16px;
      min-width: 40px;

      &:hover, &:active, &.has-open-popup {
        &, &:selected.activatable {
          @extend %selected_items;
        }
      }

      > box {
        border-spacing: 6px;
      }
    }
  }
}

/**********
 * Toasts *
 **********/

toast {
  @extend %osd;

  margin: 12px;
  margin-bottom: 24px;

  border-radius: 3px;
  border-spacing: 6px;
  padding: 5px;

  &:dir(ltr) { padding-left: 10px; }
  &:dir(rtl) { padding-right: 10px; }

  > label {
    margin: 0 6px;
  }

  button {
    @extend %osd_button;
  }

  @if $variant == 'lighter' {
    box-shadow: 0 0 0 1px $osd_borders_color;
  }
}

/*****************
 * AdwStatusPage *
 *****************/

statuspage {
  > scrolledwindow > viewport > box {
    margin: 30px 10px;
    border-spacing: 30px;

    > clamp > box {
      border-spacing: 10px;

      > .icon {
        -gtk-icon-size: 128px;

        color: gtkalpha(currentColor, 0.55);

        &:disabled {
          opacity: if($variant !='dark', 0.45, 0.55);
        }

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

  &.compact > scrolledwindow > viewport > box {
    margin: 20px 10px;
    border-spacing: 20px;

    > clamp > box {
      > .icon {
        -gtk-icon-size: 96px;

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

      > .title {
        font-size: 18pt;
      }
    }
  }
}

/*********
 * Cards *
 *********/

.card {
  @at-root %card, & {
    background-color: $base_color;
    color: $fg_color;
    border-style: solid;
    border-width: 1px;
    border-color: $borders_color;
    border-radius: 3px;

    .osd &, &.osd {
      background-color: gtkalpha(currentColor, .1);
      color: $osd_fg_color;

      @if $variant == 'lighter' {
        box-shadow: 0 0 0 1px $osd_borders_color;
      } @else {
        box-shadow: none;
      }
    }
  }

  @include focus-ring();

  .osd &, &.osd {
    &:focus:focus-visible {
      outline-color: $selected_bg_color;
    }
  }

  &.activatable {
    transition: $button_transition;

    &:hover {
      background-color: if($variant != 'dark', mix($base_color, black, 95%), mix($base_color, white, 97%));
    }

    &:active {
      background-color: mix($bg_color, $base_color);
    }
  }
}

/***************
 * Preferences *
 ***************/

preferencespage > scrolledwindow > viewport > clamp > box {
  margin: 20px 10px;
  border-spacing: 20px;
}

preferencesgroup > box {
  &, .labels {
    border-spacing: 6px;
  }

  > box.header:not(.single-line) {
    margin-bottom: 6px;
  }

  > box.single-line {
    min-height: 30px;
  }
}

/****************
 * Progress bar *
 ****************/

progressbar {
  &.osd {
    &.horizontal {
      > trough, > trough > progress { min-height: 3px; }
    }

    &.vertical {
      > trough, > trough > progress { min-width: 3px; }
    }
  }

  .osd & > trough > progress {
    background-color: $selected_bg_color;
  }
}

/***********
 * Tab bar *
 ***********/

$tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
                                               transparentize(white, .2),
                                               gtkalpha($selected_bg_color, .4) 10%,
                                               gtkalpha($selected_bg_color, 0) 30%);

@mixin undershoot-gradient($dir) {
  background: linear-gradient(to #{$dir},
                              $bg_color,
                              transparentize($bg_color, 1) 20px);
}

@mixin need-attention-gradient($dir) {
  background: linear-gradient(to #{$dir},
                              transparentize($selected_bg_color, .3),
                              transparentize($selected_bg_color, .5) 1px,
                              transparentize($selected_bg_color, 1) 20px);
}

tabbar {
  .box {
    min-height: 20px;
    background: $bg_color;
  }

  scrolledwindow.pinned {
    undershoot {
      border: 0 solid $borders_color;
    }

    &:dir(rtl) undershoot.left {
      border-left-width: 1px;
    }

    &:dir(ltr) undershoot.right {
      border-right-width: 1px;
    }

    tabbox > background {
      &:dir(ltr) {
        box-shadow: inset -1px 0 $borders_color;
      }

      &:dir(rtl) {
        box-shadow: inset 1px 0 $borders_color;
      }
    }
  }

  undershoot {
    transition: none;

    &.left {
      @include undershoot-gradient("right");
    }

    &.right {
      @include undershoot-gradient("left");
    }
  }

  .needs-attention-left undershoot.left {
    @include need-attention-gradient("right");
  }

  .needs-attention-right undershoot.right {
    @include need-attention-gradient("left");
  }

  tabbox {
    > background {
      background-color: $bg_color;
    }

    > widget {
      @include focus-ring();
    }
  }

  tab {
    border-style: solid;
    border-style: solid;
    border-color: $borders_color;
    border-width: 0 1px 0 1px;
    transition: background 150ms ease-in-out;
    background-color: transparentize($base_color, 1);
    background-clip: padding-box;
    color: $insensitive_fg_color;

    &:checked, &:checked:hover {
      background-color: $base_color;
      color: $fg_color;
    }

    &:hover {
      background-color: transparentize($base_color, 0.5);
      color: mix($fg_color, $insensitive_fg_color, 50%);
    }

    &.needs-attention {
      background-image: $tab_needs_attention_gradient;

      &:hover {
        background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
      }
    }
  }

  .start-action,
  .end-action {
    background-color: transparentize($base_color, 1);
    background-clip: padding-box;
    border-color: $borders_color;
    border-style: solid;
    transition: background 150ms ease-in-out;

    button {
      border: none;
      border-radius: 0;
    }
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    border-right-width: 1px;
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    border-left-width: 1px;
  }

  &:not(.inline) {
    .box {
      border-bottom: 1px solid $borders_color;
    }
  }
}

dnd tab {
  min-height: 20px;
  background-color: $base_color;

  &.needs-attention {
    background-image: $tab_needs_attention_gradient;
  }

    box-shadow: 0 2px 6px 1px if($variant!='dark', transparentize(black, 0.93), transparentize(black, 0.65)),
                0 0 0 1px darken($borders_color, 5%);

  margin: 25px;
}

tabbar,
dnd {
  tab {
    padding: 6px;

    button.image-button {
      padding: 0;
      margin: 0;
      min-width: 22px;
      min-height: 22px;
      border-radius: 99px;
    }
  }
}

tabview:drop(active),
tabbox:drop(active) {
  box-shadow: none;
}

/*****************
 * View switcher *
 *****************/

viewswitcher {
  margin: 0;
  border-spacing: 0;

  button.toggle {
    font-weight: normal;
    border-radius: 0;
    border-style: none;
    margin: 0;
    padding: 0;

    > stack > box {
      &.narrow {
        font-size: 0.75rem;
        padding-top: 7px;
        padding-bottom: 5px;
        border-spacing: 4px;

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

      &.wide {
        padding: 8px 10px;
        border-spacing: 6px;
      }
    }
  }
}

/**********************
 * AdwViewSwitcherBar *
 **********************/

viewswitcherbar actionbar > revealer > box {
  padding: 0;
}

viewswitcherbar viewswitcher {
  & button.toggle {
    color: $fg_color;
    background-color: transparent;

    &:hover {
      color: $fg_color;
      background-color: $button_bg;
      box-shadow: inset  1px 0 $button_border,
                  inset -1px 0 $button_border;
    }

    &.keyboard-activating,
    &:active,
    &:checked {
      @include button(active);
    }
  }
}

/************************
 * AdwViewSwitcherTitle *
 ************************/

viewswitchertitle viewswitcher {
  margin-left: 12px;
  margin-right: 12px;

  & button.toggle {
    color: $header_fg;
    background-color: transparentize($header_bg, 1);

    &:hover {
      color: $header_fg;
      background-color: $header_button_bg;
      box-shadow: inset  1px 0 $header_button_border,
                  inset -1px 0 $header_button_border;
    }

    &.keyboard-activating,
    &:active,
    &:checked {
      @include button(header-active);
    }
  }
}

/*******************
 * AdwIndicatorBin *
 *******************/

indicatorbin {
  > indicator, > mask {
    min-width: 6px;
    min-height: 6px;
    border-radius: 100px;
  }

  > indicator {
    margin: 1px;
    background: gtkalpha(currentColor, .4);

    > label {
      font-size: 0.6rem;
      font-weight: bold;
      padding: 1px 4px;
      color: white;
    }
  }

  > mask {
    padding: 1px;
    background: black;
  }

  &.needs-attention > indicator {
    background: $selected_bg_color;

    > label { color: $selected_fg_color; }
  }
}
