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

frame {
  border-radius: $card_radius;

  > label {
    margin: 4px;
  }
}

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

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

  &.spacer {
    background: none;

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

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

toast {
  background: $toast_bg_color;
  color: $toast_fg_color;
  box-shadow: 0 1px 3px 1px RGB(0 0 6 / 7%),
              0 2px 6px 2px RGB(0 0 6 / 3%);

  --standalone-color-oklab: #{$standalone-color-oklab-dark};

  --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
  --destructive-color: oklab(from var(--destructive-bg-color) var(--standalone-color-oklab));
  --success-color: oklab(from var(--success-bg-color) var(--standalone-color-oklab));
  --warning-color: oklab(from var(--warning-bg-color) var(--standalone-color-oklab));
  --error-color: oklab(from var(--error-bg-color) var(--standalone-color-oklab));

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

  border-radius: 150px;
  border-spacing: 6px;
  padding: 6px;

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

  > widget {
    margin: 0 6px;
  }

  @media (prefers-contrast: more) {
    box-shadow: 0 0 0 1px $border_color;
  }
}

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

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

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

window.about,
dialog.about {
  .main-page {
    > viewport > clamp > box {
      margin: 12px;
      border-spacing: 6px;

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

    .app-version {
      padding: 3px 18px;
      color: var(--accent-color);
      border-radius: 999px;
      margin-top: 3px;
    }
  }

  .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: 12px;

      > .icon {
        color: color-mix(in srgb, currentColor var(--dim-opacity), transparent);
        -gtk-icon-size: 128px;

        &:disabled {
          opacity: var(--disabled-opacity);
        }

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

      > .title {
        @extend .title-1;
      }
    }
  }

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

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

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

      > .title {
        @extend .title-2;
      }
    }
  }

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

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

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

      > .title {
        @extend .title-2;
      }
    }
  }
}

/* Cards */

.card {
  @at-root %card, & {
    background-color: var(--card-bg-color);
    color: var(--card-fg-color);
    border-radius: $card_radius;
    box-shadow: 0 0 0 1px RGB(0 0 6 / 3%),
                0 1px 3px 1px RGB(0 0 6 / 7%),
                0 2px 6px 2px RGB(0 0 6 / 3%);

    @media (prefers-contrast: more) {
      box-shadow: 0 0 0 1px $border_color,
                  0 1px 3px 1px RGB(0 0 6 / 7%),
                  0 2px 6px 2px RGB(0 0 6 / 3%);
    }

    .osd &, &.osd {
      background-color: color-mix(in srgb, currentColor 10%, transparent);
      color: $osd_fg_color;
      box-shadow: none;

      @media (prefers-contrast: more) {
        box-shadow: 0 0 0 1px $border_color;
      }
    }
  }

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

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

    &:hover {
      background-image: image(color-mix(in srgb, currentColor 3%, transparent));
    }

    &:active {
      background-image: image(color-mix(in srgb, currentColor 8%, transparent));
    }
  }
}

/* Transition shadows */

navigation-view,
overlay-split-view {
  @include transition-shadows();
}
