@use '../../../compiled/tokens/scss/breakpoint';
@use '../../../compiled/tokens/scss/color';
@use '../../../compiled/tokens/scss/size';
@use '../../../mixins/ms';

.demo-u-space-directions {
  div {
    border-radius: size.$border-radius-medium;
  }

  > div {
    background: color.$base-gray-light;
    overflow: hidden;
  }

  [class*='u-space'] {
    background: color.$text-light-emphasis;
    border: size.$edge-medium solid color.$base-gray;
    padding: ms.step(-1);
  }
}

.demo-u-pad-directions {
  [class*='u-pad'] {
    background: color.$base-gray-light;
    border: size.$edge-medium solid color.$base-gray;
    border-radius: size.$border-radius-medium;

    div {
      background: color.$text-light-emphasis;
      border-radius: inherit;
    }
  }
}

.demo-u-pull-directions {
  display: flex;
  flex-direction: column;

  div {
    border-radius: size.$border-radius-medium;
  }

  > div {
    background: color.$base-gray-light;
    padding: ms.step(-1);
  }

  [class*='u-pull'] {
    background: color.$text-light-emphasis;
    border: size.$edge-medium solid color.$base-gray;
    opacity: 0.66;
    padding: ms.step(-1);
  }
}