@use 'sass:color';
@use '../mastodon/functions' as *;
@use 'variables' as local;

:root {
  --dropdown-border-color: #{color.scale(local.$ui-base-color, $lightness: 14%)};
  --dropdown-background-color: #{rgba(color.scale(local.$ui-base-color, $lightness: -4%), 0.95)};
  --modal-border-color: #{color.scale(local.$ui-base-color, $lightness: 14%)};
  --modal-background-color: #{rgba(color.scale(local.$ui-base-color, $lightness: -4%), 0.85)};
  --background-border-color: #{color.scale(local.$ui-base-color, $lightness: 14%)};
  --background-color: #{color.scale(local.$ui-base-color, $lightness: -4%)};
  --background-color-tint: #{rgba(color.scale(local.$ui-base-color, $lightness: -4%), 0.95)};
  --surface-variant-background-color: #{local.$ui-base-lighter-color};
  --surface-border-color: #{color.scale(local.$ui-base-color, $lightness: 18%)};
  --rich-text-container-color: rgba(10, 60, 100, 100%);
  --rich-text-text-color: rgba(180, 220, 245, 100%);
  --rich-text-decorations-color: rgba(72, 202, 228, 100%);
}

body {
  --text-x-direction: 1;

  &.rtl {
    --text-x-direction: -1;
  }
}