@use 'mixins' as mixins;
@use 'compat-tokens-mixins' as compatMixins;
@use 'variables' as *;

@include compatMixins.sky-default-overrides() {
  --sky-override-border-dark: #{1px solid $sky-border-color-neutral-medium};
  --sky-override-border-light: #{1px solid $sky-border-color-neutral-light};
  --sky-override-border-row: #{1px dotted $sky-border-color-neutral-medium};
}

.sky-border-bottom-dark {
  border-bottom: var(
    --sky-override-border-dark,
    var(--sky-border-style-separator-dark)
      var(--sky-border-width-separator-dark)
      var(--sky-color-border-separator-dark)
  );
}

.sky-border-bottom-light {
  border-bottom: var(
    --sky-override-border-light,
    var(--sky-border-style-separator-light)
      var(--sky-border-width-separator-light)
      var(--sky-color-border-separator-light)
  );
}

.sky-border-bottom-row {
  border-bottom: var(
    --sky-override-border-row,
    var(--sky-border-style-separator-row) var(--sky-border-width-separator-row)
      var(--sky-color-border-separator-row)
  );
}

.sky-border-dark {
  border: var(
    --sky-override-border-dark,
    var(--sky-border-style-separator-dark)
      var(--sky-border-width-separator-dark)
      var(--sky-color-border-separator-dark)
  );
}

.sky-border-light {
  border: var(
    --sky-override-border-light,
    var(--sky-border-style-separator-light)
      var(--sky-border-width-separator-light)
      var(--sky-color-border-separator-light)
  );
}
