<|start_filename|>source/css/svg-sprite.css<|end_filename|>
/*------------------------------------*\
    #SVG SPRITE OVERRIDES
\*------------------------------------*/

section {
    border-top: none !important;
    padding: 0 !important;
}

.icon-boxes {
    display: flex !important;
    flex-wrap: wrap !important;
}

style + svg + header {
    display: none !important;
}

.icon-box {
    width: initial !important;
    height: auto !important;
    background: none !important;
    border: none !important;
}

.icon-boxes li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 6rem !important;
    height: 6rem !important;
    background: #f5f5f5 !important;
    border: 1px solid #cccccd !important;
}

.icon-boxes li h2 {
    color: #000 !important;
    font-size: 0.75rem !important;
    white-space: inherit !important;
    text-overflow: unset !important;
    overflow: inherit !important;
}

.icon-box .icon {
    height: 16px !important;
    width: 16px !important;
}

.icon-boxes li button {
    display: none !important;
}


<|start_filename|>source/_patterns/00-atoms/01-tokens/00-brand-colors.json<|end_filename|>
{
  "items": [
    {
      "name": "$color-brand-blue",
      "value": "#0000ff",
      "comment": ""
    }
  ],
  "meta": {
    "description": "To add to these items, use Sass variables that start with <code>$color-brand-</code> in <code>./source/css/scss/abstracts/_variables.scss</code>"
  }
}

<|start_filename|>source/styleguide/css/styleguide-specific.css<|end_filename|>
/*------------------------------------*\
    $PATTERN LAB-SPECIFIC STYLES
\*------------------------------------*/
/**
 * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
 * This is helpful for displaying demo styles for grids, animations, color swatches, etc
 * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
 * These styles will not be your production CSS.
 */
.demo-animate {
	background: #ddd;
	padding: 1em;
	margin-bottom: 1em;
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
}

.sg-label {
	font-size: 90%;
	line-height: 1;
}

.sg-fonts p {
	margin-bottom: 0.3em;
}
