@use './colors';

@mixin font-family {
  font-family:
    'Source Sans Pro',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
}

@mixin headers {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
  }
}

@mixin caption {
  .seam-caption {
    color: colors.$text-gray-2;
  }
}

@mixin danger-text {
  .seam-text-danger {
    color: colors.$status-red;
  }
}

@mixin defaults {
  html {
    color: colors.$text-default;
  }
}

@mixin truncated-text {
  .seam-truncated-text {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@mixin font-size {
  .seam-font-24 {
    font-size: 24px;
  }
}

@mixin all {
  @include headers;
  @include caption;
  @include danger-text;
  @include font-family;
  @include defaults;
  @include truncated-text;
  @include font-size;
}