/**********
 * Frames *
 **********/
frame,
.frame {
  border: 1px solid $border_color;
}

frame {
  border-radius: $button_radius;

  > label {
    margin: $base_padding / 2 + 1px;
  }
}

/**************
 * Separators *
 **************/

separator {
  background: $border_color;
  min-width: 1px;
  min-height: 1px;

  &.spacer {
    background: none;

    &.horizontal { min-width: 12px; }
    &.vertical { min-height: 12px; }
  }
}

/*********************
 * App Notifications *
 *********************/

.app-notification {
  @extend %osd;

  padding: 10px;
  border-spacing: 10px;
  border-radius: 0 0 $card_radius $card_radius;
  background-color: $osd_bg_color;
  background-image: linear-gradient(to bottom, transparentize(black, 0.8),
                                               transparent 2px);
  background-clip: padding-box;

  border { border: none; }
}

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

toast {
  @extend %osd;
  margin: $base_padding * 2;
  margin-bottom: $base_padding * 4;
  border-radius: 150px;
  border-spacing: $base_padding;
  padding: $base_padding;

  &:dir(ltr) { padding-left: $base_padding * 2; }
  &:dir(rtl) { padding-right: $base_padding * 2; }

  > widget {
    margin: 0 $base_padding;
  }
}

/**************
 * GtkVideo *
 **************/

video {
  & image.osd {
    min-width: 64px;
    min-height: 64px;
    border-radius: 32px;
  }
}

/******************
 * AdwAboutWindow *
 ******************/

window.about,
dialog.about {
  .main-page {
    > viewport > clamp > box {
      margin: $base_padding * 2;
      border-spacing: $base_padding;

      > box {
        margin-top: 18px;
        border-spacing: 18px;
        margin-bottom: $base_padding;
      }
    }

    .app-version {
      padding: $base_padding / 2 $base_padding * 3;
      color: $accent_color;
      border-radius: $circular_radius;
      margin-top: $base_padding / 2;
    }
  }

  .subpage {
    > viewport > clamp > box {
      margin: 18px 12px;
      border-spacing: 18px;
    }

    > clamp > textview {
      background: none;
      color: inherit;
    }
  }
}

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

statuspage {
  > scrolledwindow > viewport > box {
    margin: 36px 12px;
    border-spacing: 36px;

    > clamp > box {
      border-spacing: $base_padding * 2;

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

        color: gtkalpha(currentColor, $dim_label_opacity);

        &:disabled {
          opacity: $disabled_opacity;
        }

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

  &.compact > scrolledwindow > viewport > box {
    margin: 24px 12px;
    border-spacing: 24px;

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

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

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

/* Cards */

.card {
  @at-root %card, & {
    background-color: $card_bg_color;
    color: $card_fg_color;
    border-radius: $card_radius;
    box-shadow: 0 0 0 1px $border;

    .osd &, &.osd {
      background-color: gtkalpha(currentColor, .1);
      color: inherit;
      box-shadow: none;
    }
  }

  @include focus-ring($offset: -1px);

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

  &.activatable {
    transition: $focus_transition, $button_transition;

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

    &:active {
      background-image: image(gtkalpha(currentColor, .08));
    }
  }
}

/* Transition shadows */

flap,
leaflet,
navigation-view,
overlay-split-view {
  @include transition-shadows($shade_color);
}
