@import '../_mixins.scss';
@import '../_vars.scss';

$color: #505355;

.#{$namespace-prefix}-box[data-theme~='material'] {
  background-color: $color;
  font-weight: 600;

  &[data-placement^='top'] > .#{$namespace-prefix}-arrow::before {
    border-top-color: $color;
  }

  &[data-placement^='bottom'] > .#{$namespace-prefix}-arrow::before {
    border-bottom-color: $color;
  }

  &[data-placement^='left'] > .#{$namespace-prefix}-arrow::before {
    border-left-color: $color;
  }

  &[data-placement^='right'] > .#{$namespace-prefix}-arrow::before {
    border-right-color: $color;
  }

  > .#{$namespace-prefix}-backdrop {
    background-color: $color;
  }

  > .#{$namespace-prefix}-svg-arrow {
    fill: $color;
  }
}