/* Icon */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(./fonts/MaterialIcons/MaterialIcons-Regular.woff2) format('woff2'),
    url(./fonts/MaterialIcons/MaterialIcons-Regular.woff) format('woff'),
    url(./fonts/MaterialIcons/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'fontello';
  src:
    url(./fonts/fontello/fontello.woff) format('woff'),
    url(./fonts/fontello/fontello.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

.root {
  font-family: 'Material Icons';
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  user-select: none;
  word-break: normal;
  line-height: 1em;

  /* Align with text */
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.family-material {
  font-family: 'Material Icons';
}

.family-fontello {
  font-family: 'fontello';
}

.weight-normal {
  font-weight: normal;
}

.weight-heavy {
  font-weight: 600;
}

/* Sizes */
.size-12 { font-size: 12px; height: 12px; }
.size-14 { font-size: 14px; height: 14px; }
.size-16 { font-size: 16px; height: 16px; }
.size-18 { font-size: 18px; height: 18px; }
.size-20 { font-size: 20px; height: 20px; }
.size-23 { font-size: 23px; height: 23px; }
.size-24 { font-size: 24px; height: 24px; }
.size-26 { font-size: 26px; height: 26px; }
.size-36 { font-size: 36px; height: 36px; }
.size-48 { font-size: 48px; height: 48px; }

/* Themes */
.theme-light { color: #fff; }
.theme-dark { color: #000; }
.theme-positive { color: #7DD080; }
.theme-negative { color: #D56265; }
.theme-pending { color: rgb(246, 140, 58); }
.theme-blue { color: rgb(26, 158, 214); }

.color-black {
  color: var(--color-grey-charcoal);
}

.color-red {
  color: var(--color-brand-red);
}

.color-blue {
  color: var(--color-brand-blue);
}

.color-dark-blue {
  color: #4299C3;
}

.color-dark-grey {
  color: var(--color-grey-charcoal);
}

.color-grey {
  color: var(--color-grey-silver);
}

.color-teal {
  color: #A9AFC3
}

.color-light-grey {
  color: var(--color-grey-platinum);
}

.color-white-smoke {
  color: rgba(114, 140, 154, .21); /*
    NOTE Until we have a DRY solution, let’s keep this in sync with
    `defaultProps.defaultColor` in `components/supplier-approved-badge/
    supplier-approved-badge`.
  */
}

.color-white {
  color: #fff;
}

.color-green {
  color: var(--color-brand-green);
}

.color-orange {
  color: var(--color-brand-orange);
}

.color-white {
  color: #fff;
}

.color-none {}

.interactive {
  cursor: pointer;
}