//
// File: typography.scss
//
// Contains the basic typography related styles for the admin interface.

h1 {
  font-weight: 400;
}

// Tables
// Used as a base for components: GridField.

.table {
  margin-left: -$grid-gutter-width-half;
  margin-right: -$grid-gutter-width-half;
  min-width: calc(100% + #{$grid-gutter-width});
  margin-bottom: $spacer * 2;
  border-top: 0;

  th {
    background-color: $body-bg;
    font-size: $font-size-sm;
    font-weight: normal;
  }

  thead th {
    border: 0;
    background-color: transparent;
  }

  th,
  td {
    border-top: 0;
    border-bottom: $table-border-width solid $table-border-color;
    line-height: 20px;

    &:first-child {
      padding-left: $grid-gutter-width-half;
    }

    &:last-child {
      padding-right: $grid-gutter-width-half;
    }
  }

  tbody {
    background-color: $white;

    tr.even {
      background: $table-accent-bg; // can be altered in viariables
    }

    tr:hover,
    tr.even:hover {
      background: $table-hover-bg;
    }

    tr:first-child td {
      border-top: $table-border-width solid $border-color-light;
    }
  }

  tfoot {
    // background-color: transparent;
    font-size: $font-size-sm;

    td {
      border-bottom: 0;
      // background-color: $body-bg;
    }
  }
}

.cms {
  code {
    font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
  }
}

th {
  text-transform: uppercase;
}

// Helpers
.break-string {
  word-break: break-all;
}

// Adds a hyphen where the word breaks, if supported (currently not supported Chrome)
@mixin break-word() {
  // These are technically the same, but use both
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all; // sass-lint:disable-line no-misspelled-properties
  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.sub-heading {
  margin-top: -$headings-margin-bottom;
  font-size: $font-size-xs;
  display: block;
  color: $text-muted;
}

.btn-notice {
  background: #51b8d9;
  color: #fff;

  &:hover {
    color: #fff;
    background: darken(#51b8d9, 10%);
  }

  &:focus {
    color: #fff;
  }
}