@import '../../src/scss/settings/colours';

.reset {
  composes: noSpacing from '../../src/components/Spacing.modules.scss';
  composes: none from '../../src/components/Borders.modules.scss';

  // Prevent subpixel rendering problems in Chrome
  transform: rotate(-0.00001deg);
}

.horizontal {
  composes: reset;

  width: 100%;
  height: 1px;
}

.vertical {
  composes: reset;

  display: inline-block;

  width: 1px;
}

.horizontalThin {
  composes: horizontal;

  background-color: $color-gainsboro;
}

.horizontalGradient {
  composes: horizontal;

  background-image: linear-gradient(
    90deg,
    rgba(216, 216, 216, 0) 0%,
    $color-gainsboro 7%,
    $color-gainsboro 93%,
    rgba(216, 216, 216, 0) 100%
  );
}

.verticalThin {
  composes: vertical;

  background-color: $color-gainsboro;
}

.verticalGradient {
  composes: vertical;

  background-image: linear-gradient(
    0deg,
    rgba(216, 216, 216, 0) 0%,
    $color-gainsboro 12%,
    $color-gainsboro 88%,
    rgba(216, 216, 216, 0) 100%
  );
}