/**
 * Nautilus
 */

// based css:
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/Adwaita.css
// hard-coded css:
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/nautilus.css

.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  // background-color: $surface-z0;
}

.nautilus-canvas-item {
  // border-radius: $corner-radius;
}

.nautilus-canvas-item.dim-label,
.nautilus-list-dim-label {
  color: hint($on-surface);
}

.nautilus-desktop.nautilus-canvas-item {
  @extend %iconview-desktop;
}

// Toolbar

@keyframes nautilus-operations-button-needs-attention {
  to {
    background-color: overlay("focus", $on-titlebar);
  }
}

.nautilus-operations-button-needs-attention {
  animation: nautilus-operations-button-needs-attention $ripple-fade-out-duration $ease 2 alternate;
}

.nautilus-operations-button-needs-attention-multiple {
  animation: nautilus-operations-button-needs-attention $ripple-fade-out-duration $ease 6 alternate;
}

.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):not(:only-child).disclosure-button {
  border-radius: $circular-radius;
}

// Path bar

.path-bar-box {
  transition: background-color $duration $ease-out;
  margin: $container-padding 0;
  border-radius: $corner-radius;

  // reset the margin
  button {
    margin: 0;
  }

  &.width-maximized {
    background-color: entry-fill($on-titlebar);
  }

  // workaround for 3.30.1
  &.background.frame {
    border-style: none;
    background-color: entry-fill($on-titlebar);
  }

  // for 3.30
  .path-bar button {
    label:not(:only-child) {
      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  // for 3.32
  .nautilus-path-bar button:not(.suggested-action):not(.destructive-action) {
    padding-left: ($medium-size - 24px) / 2;
    padding-right: ($medium-size - 24px) / 2;

    &.text-button {
      min-width: 0;
    }

    label:not(:only-child) {
      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    &.text-button.image-button image:not(:only-child) {
      margin: 0;
    }

    &:last-child:dir(ltr),
    &:first-child:dir(rtl) {
      @extend %titlebar-button-checked;
    }
  }
}

// Floating status bar
.nautilus-window .floating-bar {
  min-height: 32px;
  padding: 0;
  border-style: solid solid none;
  border-width: 1px;
  border-color: divider($on-surface);
  border-radius: ($corner-radius + 1px) ($corner-radius + 1px) 0 0;
  background-clip: padding-box;
  background-color: $surface-z8;

  // axes left border and border radius
  &.bottom.left {
    margin-right: 8px - 1px;
    border-left-style: none;
    border-top-left-radius: 0;
  }

  // axes right border and border radius
  &.bottom.right {
    margin-left: 8px - 1px;
    border-right-style: none;
    border-top-right-radius: 0;
  }

  button {
    margin: (32px - $small-size) / 2;

    @extend %button-small;
  }
}

.disk-space-display {
  // border-style: solid;
  // border-width: 2px;

  &.unknown {
    background-color: stroke($on-surface);
    color: stroke($on-surface);
  }

  &.used {
    background-color: $primary;
    color: $primary;
  }

  &.free {
    background-color: fill($on-surface);
    color: fill($on-surface);
  }
}

// View
// Hide superfluous treeview drop target indication
.nautilus-list-view .view:not(.dnd) {
  // border-bottom: 1px solid divider($on-surface);
}

.search-information {
  padding: 2px;
  border-bottom: 1px solid divider($on-surface);
}

.documents-entry-tag {
  @extend .entry-tag;
}

.conflict-row:not(:selected) {
  background-color: mix($warning, $surface-z1, percentage(.3));
}

// Icon view
.nautilus-window flowboxchild {
  .icon-background {
    // background-color: black;
  }

  .icon-item-background {
    padding: 4px;
    border-radius: $corner-radius;
  }

  &:selected {
    background-color: transparent;

    .icon-item-background {
      background-color: $overlay-selected;
    }
  }
}

// Batch rename dialog
dialog.background > box.dialog-vbox.vertical > grid.horizontal {
  > scrolledwindow.frame {
    border-style: none;
  }

  > box.horizontal:last-child {
    margin: -6px 0 0 -6px;
    border-top: 1px solid divider($on-surface);

    > label {
      margin: 0 8px;
    }

    > box > button {
      border-radius: 0;
    }
  }
}

// Tweak to fix the messy sizing of the popover menu
.nautilus-window > popover.menu:not(:last-child) {
  padding: 3px;

  > stack > box > box > box {
    margin-top: -6px;

    > box {
      margin-bottom: -6px;

      &.linked {
        margin-top: 1px;
      }
    }
  }

  separator {
    margin-bottom: -2px;
  }
}

.nautilus-menu-sort-heading {
  // min-height: 26px;
  // padding-left: 5px;
  // padding-right: 5px;
  margin: 1px 3px;
  font-weight: 500;

  &:disabled {
    color: hint($on-surface);
  }
}

// Make operations button circular
.nautilus-window headerbar revealer > button {
  border-radius: $circular-radius;
}

// Ensure paned separator rendering. See issue #84 for details.
.nautilus-window paned > separator {
  background-color: $surface-z0;
}


/**
 * gedit
 */

// based css:
// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit.adwaita.css
// hard-coded css:
// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit-style.css

// Only normal state is handle
.open-document-selector-name-label {
  // font-weight: bold;
}

// Only normal state is handle
.open-document-selector-path-label {
  color: hint($on-surface);
  font-size: smaller;
}

// Only normal state is handle
.open-document-selector-match {
  background-color: $warning;
  color: $on-warning;
}

.gedit-document-panel {
  // Try to look as the notebook tab close button
  row button.flat {
    margin-top: 8px;
    margin-bottom: 8px;

    @extend %button-small;
  }
}

.gedit-document-panel-group-row:not(:first-child) {
  border-top: 1px solid divider($on-surface);
}

.gedit-side-panel-paned statusbar {
  border-top: 1px solid divider($on-surface);
}

.gedit-search-slider {
  margin: 4px 4px 8px;

  .linked:not(.vertical) > entry {
    border-radius: $corner-radius;
    @extend %entry_raised;

    .gedit-search-entry-occurrences-tag {
      all: unset;
      color: hint($on-surface);
    }

    $buttons_width: $small-size * 2 + $container-padding * 3;

    &:dir(ltr) {
      margin-right: -$buttons_width;
      padding-right: $buttons_width;

      .gedit-search-entry-occurrences-tag {
        margin-left: $container-padding;
      }

      image.right {
        margin-right: 0;
      }
    }

    &:dir(rtl) {
      margin-left: -$buttons_width;
      padding-left: $buttons_width;

      .gedit-search-entry-occurrences-tag {
        margin-right: $container-padding;
      }

      image.left {
        margin-left: 0;
      }
    }

    &:not(.error) {
      background-color: $surface-z8;
    }

    &.error ~ button {
      color: hint($on-error);
      @include ink-color($on-error, $button-style: "flat");

      &:disabled {
        color: disabled-hint($on-error);
      }
    }
  }

  .linked:not(.vertical) > button {
    border: solid $container-padding transparent;
    border-radius: $circular-radius;
    background-clip: padding-box;

    @extend %button-flat-basic;
    @extend %button-small;

    &:last-child:dir(ltr),
    &:not(:first-child):dir(rtl) {
      margin-left: -$container-padding / 2;
    }

    &:first-child:dir(rtl),
    &:not(:last-child):dir(ltr) {
      margin-right: -$container-padding / 2;
    }
  }
}

frame.gedit-map-frame > border {
  &:dir(ltr) {
    border-style: none none none solid;
  }

  &:dir(rtl) {
    border-style: none solid none none;
  }
}

/**
 * Tweaks
 */

// hard-coded css:
// https://gitlab.gnome.org/GNOME/gnome-tweaks/blob/master/data/shell.css

// the sidebar
.tweak-categories {
  // padding: 4px 0;
  // background-color: shade(@theme_bg_color, 0.99);
  background-image: image($surface-z0);

  separator {
    @extend %hide_separators;
  }
}

.tweak {
  // padding-top: 3px;
  padding: 3px;

  &.title:hover {
    box-shadow: none;
  }
}

.tweak-group-white,
.tweak-white,
.tweak-white:hover {
  // background-color: white;
  background-image: image($surface-z1);
}

.tweak-startup,
.tweak-startup:hover {
  // background-color: lighter(shade(@theme_bg_color, 0.9));
  background-image: image($surface-z1);
}

.tweak-group-startup {
  border: 1px solid divider($on-surface);
  background-clip: padding-box;
  // background-color: @view_separators;
  background-image: image($surface-z1);
}

//
// Workaround for 3.26
//

row#Focus,
row#ClickMethod,
row#StaticWorkspaceTweak, // for 3.26.0
row#dynamic-workspaces,
row#PrimaryWorkspaceTweak, // for 3.26.0
row#workspaces-only-on-primary {
  padding: 0;
  border: 1px solid divider($on-surface);
  background-clip: padding-box;
  background-image: image($surface-z1);

  row:not(:last-child) {
    border-bottom: 1px solid divider($on-surface);
  }

  &.tweak > list {
    margin-top: -3px;
  }
}

// Add more spaces between title and list
row#Focus,
row#ClickMethod,
row#PrimaryWorkspaceTweak, // for 3.26.0
row#workspaces-only-on-primary {
  margin-top: 4px;
}

// Workaround for gnome-tweaks 3.34
// See https://github.com/nana-4/materia-theme/issues/432
hdyleaflet.titlebar > .titlebar.tweak-titlebar-left,
hdyleaflet.titlebar > .titlebar.tweak-titlebar-right {
  background-color: inherit;
  box-shadow: inherit;
  // Remove only background-color transition.
  // This shouldn't be necessary, but otherwise it gets lag...
  transition: color $duration $ease-out;

  + separator {
    background-color: inherit;
    background-image: image(divider($on-titlebar));
  }
}

/**
 * Builder
 */

// based css for 3.22:
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-22/data/theme
// based css for 3.24:
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-24/data/theme
// based css for 3.26:
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-26/data/themes

// Layout tab and tab bar tweaks
// The following makes the layout stack header look similar to a tab bar.
layouttabbar {
  border-bottom: 1px solid divider($on-surface);
  background-color: $surface-z0;

  button {
    @extend %button-flat-activatable;
  }

  > box > button {
    margin: (40px - $medium-size) / 2 0;
    // border-radius: 0;
  }
}

layouttab {
  margin: 0 8px; // not working
  border-style: none solid;
  border-width: 1px;
  border-color: divider($on-surface);
  box-shadow: inset 0 -2px $primary;
  background-color: $surface-z1;

  separator.vertical {
    margin: 8px 4px;
  }

  button {
    &,
    &.text-button,
    &.image-button {
      margin-top: 8px;
      margin-bottom: 8px;
      padding: 0 4px;
    }
  }

  // Close button styling for layouttab.
  > box > button.close {
    // border-radius: $circular-radius;
  }
}

layout {
  border: 1px solid divider($on-surface);
  -PnlDockBin-handle-size: 1;
}

entry.search-missing {
  background-color: $error;
  color: $on-error;
}

// tweak icons for treeviews
window.workbench treeview.image {
  color: hint($on-surface);
}

popover.popover-selector list {
  padding: 8px - 2px;

  row {
    border-radius: $corner-radius;

    image {
      &:dir(ltr) {
        margin-right: 6px;
      }

      &:dir(rtl) {
        margin-left: 6px;
      }
    }

    .accel {
      &:dir(ltr) {
        margin-left: 6px;
      }

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

omnibar {
  &.linked:not(.vertical) entry {
    border-radius: $corner-radius;
  }

  entry {
    color: hint($on-surface);
  }
}

popover.omnibar list row:not(:last-child) {
  border-bottom: 1px solid divider($on-surface);
}

entry.preferences-search {
  border-bottom: 1px solid divider($on-surface);
  box-shadow: none;
  background-color: transparent;

  // doesn't work properly
  &:dir(ltr) {
    // border-right: 1px solid divider($on-surface);
  }

  &:dir(rtl) {
    // border-left: 1px solid divider($on-surface);
  }
}

preferences stacksidebar.sidebar {
  list {
    // background-color: $surface-z0;
  }

  &:dir(ltr),
  &:dir(rtl) {
    list {
      border-style: none;
    }
  }

  list separator {
    @extend %hide_separators;
  }
}

preferences > box > box {
  &:dir(ltr) {
    border-right: 1px solid divider($on-surface);
  }

  &:dir(rtl) {
    border-left: 1px solid divider($on-surface);
  }
}

popover.messagepopover {
  &.background {
    padding: 0;
  }

  .popover-action-area button {
    @extend %button-flat-basic;

    padding: 8px 16px;
    border-top: 1px solid divider($on-surface);
    border-radius: 0;

    &:first-child {
      border-bottom-left-radius: $corner-radius;
    }

    &:last-child {
      border-bottom-right-radius: $corner-radius;
    }
  }

  .popover-content-area {
    margin: 16px;
  }
}

popover.transfers list {
  background-color: transparent;

  row:not(:first-child) {
    border-top: 1px solid divider($on-surface);
  }

  row > box {
    padding: 10px;
  }
}

dockbin {
  border: 1px solid divider($on-surface);
  -PnlDockBin-handle-size: 1;
}

dockpaned {
  border: 1px solid divider($on-surface);
}

eggsearchbar box.search-bar {
  padding: 0 8px;
  border-bottom: 1px solid divider($on-surface);
  background-color: $surface-z0;
}

docktabstrip {
  padding: 0 8px;
  border-bottom: 1px solid divider($on-surface);
  background-color: $surface-z0;
}

docktab {
  transition: $transition,
              background-size 0ms,
              background-image 0ms;
  min-height: $small-size;
  min-width: $small-size;
  margin-bottom: -1px;
  padding: $container-padding 6px;

  border-width: 1px;         // for reorderable tabs
  border-color: transparent; //

  box-shadow: inset 0 -2px transparent;
  background-image: radial-gradient(circle, $primary 10%, transparent 0%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0% 0%;

  color: hint($on-surface);
  font-weight: 500;

  &:hover {
    background-color: overlay("hover", $on-surface);
  }

  &:checked {
    transition: $transition,
                background-size $ripple-fade-in-duration $ease-out,
                background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
    box-shadow: inset 0 -2px $primary;
    background-color: transparent;
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
    background-size: 1000% 1000%;
    color: $on-surface;
  }
}

dockoverlayedge {
  background-color: $surface-z0;

  docktabstrip {
    padding: 0;
    border: none;
  }

  &.left-edge docktab:checked {
    box-shadow: inset -2px 0 $primary;
  }

  &.right-edge docktab:checked {
    box-shadow: inset 2px 0 $primary;
  }
}

pillbox {
  background-color: $surface-z0;
  border-radius: $corner-radius;
}

buildperspective row {
  // padding: 10px;
}

layoutpane entry.search {
  border-bottom: 1px solid divider($on-surface);
  box-shadow: none;
  background-color: $surface-z1;
}

editortweak entry.search {
  margin-bottom: -1px;
  box-shadow: none;
  background-color: transparent;
}

//
// let's tweak hard-coded elements
//

.gb-search-entry-occurrences-tag {
  box-shadow: none;
  background-color: transparent;
}

// Keep search bar and layouttab height in sync.
// layouttabbar > box,
// eggsearchbar > revealer > box,
docktabstrip {
  min-height: 39px;
}

eggsearchbar entry {
  // min-height: 24px;
}

window.workbench preferences preferencesgroup list entry {
  // background: none;
  // min-height: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
}

button.run-arrow-button {
  // min-width: 12px;
  padding-left: ($medium-size - 16px) / 2;
  padding-right: ($medium-size - 16px) / 2;
}

//
// Additional styles for 3.26
//

button.dzlmenubutton image {
  min-width: $medium-size - 6px;

  &.arrow {
    min-width: $medium-size - 9px;
  }
}

button.dzlmenubuttonitem {
  color: $on-surface;
  font-weight: normal;

  &:disabled {
    color: disabled($on-surface);
  }
}

idelayoutstackheader {
  border-bottom: 1px solid divider($on-surface);

  button:checked {
    color: $on-surface;
  }
}

// utilities stack switcher
ideeditorutilities > dzldockpaned > box > stackswitcher {
  padding: 8px 0;
  background-color: $surface-z0;

  &:dir(ltr) {
    border-right: 1px solid divider($on-surface);
  }

  &:dir(rtl) {
    border-left: 1px solid divider($on-surface);
  }

  button {
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;

    &:active {
      background-image: radial-gradient(circle, rgba($primary, .7) 10%, transparent 0%);
    }

    &:checked {
      background-color: transparent;
      color: $on-surface;
    }

    &:dir(ltr) {
      margin-right: -1px;

      &:checked {
        box-shadow: inset -2px 0 $primary;
      }
    }

    &:dir(rtl) {
      margin-left: -1px;

      &:checked {
        box-shadow: inset 2px 0 $primary;
      }
    }
  }
}

// buildui panel
ideeditorsidebar notebook header {
  background: transparent;
}

popover.messagepopover {
  // padding: 0;

  list {
    border: 1px solid divider($on-surface);
    background-clip: padding-box;

    row:not(:last-child) {
      border-bottom: 1px solid divider($on-surface);
    }
  }
}

// Workaround for hard-coded .title color
dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row:selected {
  .title {
    // color: @theme_selected_fg_color;
  }

  background-color: $primary;
  color: $on-primary;
}

// Workaround for hard-coded button background
#titlebar_container .suggestionbutton button {
  // background-color: @content_view_bg;
  // background-image: none;

  padding: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 9999px $titlebar;

  &:backdrop {
    box-shadow: inset 0 0 0 9999px $titlebar-backdrop;
  }

  // For some reason background-image doesn't work well with transition :(
  image {
    transition:
      box-shadow $duration $ease-out,
      background-color $ripple-fade-in-duration $ease-out;
    min-width: $medium-size;
    min-height: $medium-size;
    border-radius: $circular-radius;
    box-shadow: inset 0 0 0 9999px transparent;
  }

  &:hover image {
    box-shadow: inset 0 0 0 9999px overlay("hover", $on-titlebar);
  }

  &:focus image {
    box-shadow: inset 0 0 0 9999px overlay("focus", $on-titlebar);
  }

  &:active image {
    background-color: overlay("pressed", $on-titlebar);
  }
}

/**
 * Photos
 */

// based css:
// https://gitlab.gnome.org/GNOME/gnome-photos/blob/master/data/Adwaita.css

GdMainIconView.content-view {
  -GdMainIconView-icon-size: 48;

  // Make spinner visible on both dark and bright backgrounds w/o making
  // it look ugly/weird.
  &.cell:active {
    // color: disabled($on-surface);
  }
}

.documents-counter {
  margin: 8px;
  border-radius: $circular-radius;
  box-shadow: $shadow-z4;
  background-color: $primary;
  color: $on-primary;
  font-weight: bold;
}

.photos-entry-tag {
  @extend .entry-tag;
}

.documents-scrolledwin.frame {
  border-style: none;
  background-color: transparent;

  frame.content-view > border {
    border-style: none;
    background-color: transparent;
  }
}

.photos-icon-bg {
}

.photos-fade-in {
  opacity: 1;
  transition: opacity $duration $ease-out;
}

.photos-fade-out {
  opacity: 0;
  transition: opacity $duration $ease-out;
}

.photos-collection-icon {
}

button.photos-filter-preview {
  color: $on-surface;
  font-weight: normal;

  &:checked {
    background-color: $overlay-selected;
    color: $on-surface;

    image {
      color: $on-dark;
      -gtk-icon-shadow: $text-shadow;
    }
  }
}

overlay grid.horizontal > revealer > scrolledwindow.frame {
  border-style: none;
  background-color: transparent;

  &:dir(ltr) {
    border-left-style: solid;
  }

  &:dir(rtl) {
    border-right-style: solid;
  }
}

/**
 * Music
 */

// hard-coded css:
// https://gitlab.gnome.org/GNOME/gnome-music/blob/master/data/application.css

.side-panel:dir(ltr) {
  // border-width: 0 1px 0 0;
  border-style: solid;
  border-color: divider($on-surface);
}

.side-panel:dir(rtl) {
  // border-width: 0 0 0 1px;
  border-style: solid;
  border-color: divider($on-surface);
}

.side-panel .view {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
  background-image: image($surface-z0);

  &:hover {
    background-image: image(overlay("hover", $on-surface, $on: $surface-z0));
  }
}

.side-panel .view:selected {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
  background-image: image($primary);

  &:hover {
    background-image: image(overlay("hover", $on-primary, $on: $primary));
  }
}

.songs-list {
  // box-shadow: inset 0 -1px shade(@borders, 1.30);
  // background-color: @theme_bg_color;

  &:hover {
    background-image: image(overlay("hover", $on-surface));
  }
}

frame.documents-dropdown {
  @extend %toolbar-osd;

  margin: 8px;

  > border {
    border: none;
  }
}

box.vertical > revealer > toolbar.search-bar {
  border-bottom: 1px solid divider($on-surface);

  button > widget {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    // -GtkArrow-arrow-scaling: 1;
  }
}

/**
 * Terminal
 */

terminal-window notebook > header > box {
  // Remove hard-coded margin around button(s)
  margin: -2px;

  button {
    border-radius: 0;
  }
}

/**
 * To Do
 */

// less than 3.28
task-list-view {
  taskrow {
    transition: $transition;
    margin: 0 -8px;

    &:hover {
      transition: none;
    }

    label {
      margin: 0 8px;
    }

    image.dim-label {
      min-width: 16px;
    }
  }

  > box > revealer > box > button {
    margin: (12px * 2 - $medium-size) / 2;

    .dim-label {
      color: inherit;
    }
  }
}

// 3.28 or later
tasklistview {
  taskrow {
    outline: none;

    entry {
      &,
      &:focus,
      &:disabled {
        box-shadow: none;
      }
    }

    image.dim-label {
      min-width: 16px;
    }
  }

  > box > revealer > box > button {
    margin: (12px * 2 - $medium-size) / 2;

    .dim-label {
      color: inherit;
    }
  }
}

/**
 * eog
 */

#eog-thumb-nav {
  scrolledwindow.frame {
    border-top: none;
  }
}

/**
 * Evolution
 */

frame.taskbar > border {
  border-style: solid none none;
}

box.vertical > paned.horizontal notebook widget .frame {
  border-style: none;
}

/**
 * gitg
 */

frame.commit-frame > border {
  border-style: solid none none;
}

/**
 * Characters
 */

box.dialog-vbox scrolledwindow.related {
  border: 1px solid divider($on-surface);
  background-clip: padding-box;
  background-color: $surface-z1;
}

list.categories {
  background-image: image($surface-z0);
}

/**
 * Boxes
 */

.transparent-bg + stack overlay > label {
  min-height: 24px;
  padding: 0 4px;
  border-radius: $corner-radius;
  background-color: $scrim;
  color: $on-scrim;
}

/**
 * Evince
 */

// Color is needed for Evince to match hardcoded background-color,
// since Documents app is also uses this style, background-color needs to be set accordingly.
evview.content-view.view:selected {
  background-color: $primary;
  color: $on-primary;
}

/**
 * Polari
 */

// hard-coded css:
// https://gitlab.gnome.org/GNOME/polari/blob/master/data/resources/application.css

// background-color is needed to match hard-coded row colors.
// Just $primary is too harsh for activated rows, so add transparency.
.polari-room-list row:selected {
  background-color: rgba($primary, .5);
}

/**
 * Fractal
 */

.message-input-area button {
  @extend %button-flat-activatable;
}

// To display the drop shadow
button.osd.scroll_button {
  margin: 4px;
}

/**
 * Mines
 */

grid.minefield > button.tile {
  border-style: solid;
}