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

:root {
  --dropdown-border-color: #{color.scale(local.$ui-base-color, $lightness: 8%)};
  --dropdown-background-color: #{rgba(color.scale(local.$ui-base-color, $lightness: -2%), 0.95)};
  --modal-border-color: #{color.scale(local.$ui-base-color, $lightness: 8%)};
  --modal-background-color: #{rgba(color.scale(local.$ui-base-color, $lightness: -2%), 0.85)};
  --background-border-color: #{color.scale(local.$ui-base-color, $lightness: 8%)};
  --background-color: #{color.scale(local.$ui-base-color, $lightness: -2%)};
  --background-color-tint: #{rgba(color.scale(local.$ui-base-color, $lightness: -2%), 0.95)};
  --surface-variant-background-color: #{local.$ui-base-lighter-color};
  --surface-border-color: #{color.scale(local.$ui-base-color, $lightness: 12%)};
  --rich-text-container-color: rgba(0, 60, 80, 100%);
  --rich-text-text-color: rgba(131, 148, 150, 100%);
  --rich-text-decorations-color: rgba(42, 161, 152, 100%);
}

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

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