@import "../variables";

body {
  padding: 0;
  margin: 0;
}

a {
  color: @accent1;
}

.paragraph-styles p {
  margin: 0;
}

.paragraph-styles,
.brand-color {
  display: flex;
  flex-wrap: wrap;
}

.container {
  max-width: 960px;
  margin: 100px auto;
  padding: 20px;
}

.style-guide-header {
  margin-bottom: 40px;
}

.g-row {
  margin-left: -20px;
  margin-right: -20px;
}

.brand-color {
  color: #fff;
}

.g-title-small {
  padding-top: 15px;
  border-top: 1px solid #ddd;
}

.container :first-of-type .g-title-small {
  border: none
}

.container .flex-group .g-title-small {
  border-top: 1px solid #ddd
}

.g-box-color {
  flex: 1;
  margin: 10px 20px;
  padding: 20px;
  text-align: center;
  min-width: 120px;
  max-width: 120px;

}

.g-box-text {
  flex: 1;
  margin: 10px 20px;
  min-width: 200px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.inherit {
  color: #555;
}

.section {
  margin-bottom: 50px;
}

.flex-group {
  display: flex;
  > * {
    flex: 1;
    margin: 10px 20px;
  }
}

.section-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .g-input-field {
    width: 100%;
  }
}

.g-input-field {
  margin-bottom: 15px;
  padding: 0 10px;
  &:last-of-type {
    margin-bottom: 0;
  }
}

.g-label {
  margin-bottom: 5px;
  margin-top: 15px;
}

.g-flex-row-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.checkbox-wrap {
  margin-bottom: 10px;
  &:last-of-type {
    margin-bottom: 0;
  }
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 5px 2px 0;
}

// STYLES NOT RELATED TO THE STYLE GUIDE END!!!

/*
      STYLE  GUIDE STYLES
    =======================
*/
body {
  font-family: @font-family-base;
  color: @text-color;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 10px;
}

// Brand colors
.accent1 {
  background: @accent1;
}

.accent2 {
  background: @accent2;
}

.accent3 {
  background: @accent3;
}

.accent1-light {
  background: @accent1-light;
  color:#222;
}

.accent1-mid {
  background: @accent1-mid;
}

.accent1-mid-2 {
  background: @accent1-mid-2;
  color:#222;
}

.accent3-light {
  background: lighten(@accent3, 35%);
  color:#222;
}

.accent3-mid {
  background: @accent3-mid;
}



// Gray colors
.igGray1 {
  background: @igGray1;
  color: #222;
}

.igGray2 {
  background: @igGray2;
  color: #222;
}

.igGray3 {
  background: @igGray3;
  color: #222;
}

.igGray4 {
  background: @igGray4;
  color: #222;
}

.igGray5 {
  background: @igGray5;
  color: #222;
}

.igGray6 {
  background: @igGray6;
  color: #222;
}

.igGray7 {
  background: @igGray7;
}

.igGray8 {
  background: @igGray8;
}

.igGray9 {
  background: @igGray9;
}

.igGray10 {
  background: @igGray10;
}

// Text color
.text-color {
  color: @text-color;
}

.text-muted {
  color: @text-muted;
}




