.color-palette {
  .clearfix();

  li {
    list-style: none;
  }

  .color {
    padding: 15px;

    .name {
      display: block;
      margin-bottom: 60px;
    }

    .hex {
      float: right;
    }
  }

  .color-group {
    padding-top: 16px;
    padding-bottom: 16px;
    display: block;
  }


  @media @device-small {
    .color-group {
      float: left;
      width: 50%;
    }
  }

  @media @device-medium {
    .color-group {
      width: 33%;
    }

    .neutral {
      .color-group {
        padding-bottom: 216px;

        &:last-child {
          padding-bottom: 16px;
        }
      }
    }
  }

  @media @device-large {
    .color-group {
      width: 25%;
    }

    .neutral {
      .color-group {
        padding-bottom: 16px;
      }
    }
  }

  .red-50 { background-color: @red-50; }
  .red-100 { background-color: @red-100; }
  .red-200 { background-color: @red-200; }
  .red-300 { background-color: @red-300; }
  .red-400 { background-color: @red-400; }
  .red-500 { background-color: @red-500; }
  .red-600 { background-color: @red-600; }
  .red-700 { background-color: @red-700; }
  .red-800 { background-color: @red-800; }
  .red-900 { background-color: @red-900; }
  .red-A100 { background-color: @red-A100; }
  .red-A200 { background-color: @red-A200; }
  .red-A400 { background-color: @red-A400; }
  .red-A700 { background-color: @red-A700; }

  .pink-50 { background-color: @pink-50; }
  .pink-100 { background-color: @pink-100; }
  .pink-200 { background-color: @pink-200; }
  .pink-300 { background-color: @pink-300; }
  .pink-400 { background-color: @pink-400; }
  .pink-500 { background-color: @pink-500; }
  .pink-600 { background-color: @pink-600; }
  .pink-700 { background-color: @pink-700; }
  .pink-800 { background-color: @pink-800; }
  .pink-900 { background-color: @pink-900; }
  .pink-A100 { background-color: @pink-A100; }
  .pink-A200 { background-color: @pink-A200; }
  .pink-A400 { background-color: @pink-A400; }
  .pink-A700 { background-color: @pink-A700; }

  .purple-50 { background-color: @purple-50; }
  .purple-100 { background-color: @purple-100; }
  .purple-200 { background-color: @purple-200; }
  .purple-300 { background-color: @purple-300; }
  .purple-400 { background-color: @purple-400; }
  .purple-500 { background-color: @purple-500; }
  .purple-600 { background-color: @purple-600; }
  .purple-700 { background-color: @purple-700; }
  .purple-800 { background-color: @purple-800; }
  .purple-900 { background-color: @purple-900; }
  .purple-A100 { background-color: @purple-A100; }
  .purple-A200 { background-color: @purple-A200; }
  .purple-A400 { background-color: @purple-A400; }
  .purple-A700 { background-color: @purple-A700; }

  .deep-purple-50 { background-color: @deep-purple-50; }
  .deep-purple-100 { background-color: @deep-purple-100; }
  .deep-purple-200 { background-color: @deep-purple-200; }
  .deep-purple-300 { background-color: @deep-purple-300; }
  .deep-purple-400 { background-color: @deep-purple-400; }
  .deep-purple-500 { background-color: @deep-purple-500; }
  .deep-purple-600 { background-color: @deep-purple-600; }
  .deep-purple-700 { background-color: @deep-purple-700; }
  .deep-purple-800 { background-color: @deep-purple-800; }
  .deep-purple-900 { background-color: @deep-purple-900; }
  .deep-purple-A100 { background-color: @deep-purple-A100; }
  .deep-purple-A200 { background-color: @deep-purple-A200; }
  .deep-purple-A400 { background-color: @deep-purple-A400; }
  .deep-purple-A700 { background-color: @deep-purple-A700; }

  .indigo-50 { background-color: @indigo-50; }
  .indigo-100 { background-color: @indigo-100; }
  .indigo-200 { background-color: @indigo-200; }
  .indigo-300 { background-color: @indigo-300; }
  .indigo-400 { background-color: @indigo-400; }
  .indigo-500 { background-color: @indigo-500; }
  .indigo-600 { background-color: @indigo-600; }
  .indigo-700 { background-color: @indigo-700; }
  .indigo-800 { background-color: @indigo-800; }
  .indigo-900 { background-color: @indigo-900; }
  .indigo-A100 { background-color: @indigo-A100; }
  .indigo-A200 { background-color: @indigo-A200; }
  .indigo-A400 { background-color: @indigo-A400; }
  .indigo-A700 { background-color: @indigo-A700; }

  .blue-50 { background-color: @blue-50; }
  .blue-100 { background-color: @blue-100; }
  .blue-200 { background-color: @blue-200; }
  .blue-300 { background-color: @blue-300; }
  .blue-400 { background-color: @blue-400; }
  .blue-500 { background-color: @blue-500; }
  .blue-600 { background-color: @blue-600; }
  .blue-700 { background-color: @blue-700; }
  .blue-800 { background-color: @blue-800; }
  .blue-900 { background-color: @blue-900; }
  .blue-A100 { background-color: @blue-A100; }
  .blue-A200 { background-color: @blue-A200; }
  .blue-A400 { background-color: @blue-A400; }
  .blue-A700 { background-color: @blue-A700; }

  .light-blue-50 { background-color: @light-blue-50; }
  .light-blue-100 { background-color: @light-blue-100; }
  .light-blue-200 { background-color: @light-blue-200; }
  .light-blue-300 { background-color: @light-blue-300; }
  .light-blue-400 { background-color: @light-blue-400; }
  .light-blue-500 { background-color: @light-blue-500; }
  .light-blue-600 { background-color: @light-blue-600; }
  .light-blue-700 { background-color: @light-blue-700; }
  .light-blue-800 { background-color: @light-blue-800; }
  .light-blue-900 { background-color: @light-blue-900; }
  .light-blue-A100 { background-color: @light-blue-A100; }
  .light-blue-A200 { background-color: @light-blue-A200; }
  .light-blue-A400 { background-color: @light-blue-A400; }
  .light-blue-A700 { background-color: @light-blue-A700; }

  .cyan-50 { background-color: @cyan-50; }
  .cyan-100 { background-color: @cyan-100; }
  .cyan-200 { background-color: @cyan-200; }
  .cyan-300 { background-color: @cyan-300; }
  .cyan-400 { background-color: @cyan-400; }
  .cyan-500 { background-color: @cyan-500; }
  .cyan-600 { background-color: @cyan-600; }
  .cyan-700 { background-color: @cyan-700; }
  .cyan-800 { background-color: @cyan-800; }
  .cyan-900 { background-color: @cyan-900; }
  .cyan-A100 { background-color: @cyan-A100; }
  .cyan-A200 { background-color: @cyan-A200; }
  .cyan-A400 { background-color: @cyan-A400; }
  .cyan-A700 { background-color: @cyan-A700; }

  .teal-50 { background-color: @teal-50; }
  .teal-100 { background-color: @teal-100; }
  .teal-200 { background-color: @teal-200; }
  .teal-300 { background-color: @teal-300; }
  .teal-400 { background-color: @teal-400; }
  .teal-500 { background-color: @teal-500; }
  .teal-600 { background-color: @teal-600; }
  .teal-700 { background-color: @teal-700; }
  .teal-800 { background-color: @teal-800; }
  .teal-900 { background-color: @teal-900; }
  .teal-A100 { background-color: @teal-A100; }
  .teal-A200 { background-color: @teal-A200; }
  .teal-A400 { background-color: @teal-A400; }
  .teal-A700 { background-color: @teal-A700; }

  .green-50 { background-color: @green-50; }
  .green-100 { background-color: @green-100; }
  .green-200 { background-color: @green-200; }
  .green-300 { background-color: @green-300; }
  .green-400 { background-color: @green-400; }
  .green-500 { background-color: @green-500; }
  .green-600 { background-color: @green-600; }
  .green-700 { background-color: @green-700; }
  .green-800 { background-color: @green-800; }
  .green-900 { background-color: @green-900; }
  .green-A100 { background-color: @green-A100; }
  .green-A200 { background-color: @green-A200; }
  .green-A400 { background-color: @green-A400; }
  .green-A700 { background-color: @green-A700; }

  .light-green-50 { background-color: @light-green-50; }
  .light-green-100 { background-color: @light-green-100; }
  .light-green-200 { background-color: @light-green-200; }
  .light-green-300 { background-color: @light-green-300; }
  .light-green-400 { background-color: @light-green-400; }
  .light-green-500 { background-color: @light-green-500; }
  .light-green-600 { background-color: @light-green-600; }
  .light-green-700 { background-color: @light-green-700; }
  .light-green-800 { background-color: @light-green-800; }
  .light-green-900 { background-color: @light-green-900; }
  .light-green-A100 { background-color: @light-green-A100; }
  .light-green-A200 { background-color: @light-green-A200; }
  .light-green-A400 { background-color: @light-green-A400; }
  .light-green-A700 { background-color: @light-green-A700; }

  .lime-50 { background-color: @lime-50; }
  .lime-100 { background-color: @lime-100; }
  .lime-200 { background-color: @lime-200; }
  .lime-300 { background-color: @lime-300; }
  .lime-400 { background-color: @lime-400; }
  .lime-500 { background-color: @lime-500; }
  .lime-600 { background-color: @lime-600; }
  .lime-700 { background-color: @lime-700; }
  .lime-800 { background-color: @lime-800; }
  .lime-900 { background-color: @lime-900; }
  .lime-A100 { background-color: @lime-A100; }
  .lime-A200 { background-color: @lime-A200; }
  .lime-A400 { background-color: @lime-A400; }
  .lime-A700 { background-color: @lime-A700; }

  .yellow-50 { background-color: @yellow-50; }
  .yellow-100 { background-color: @yellow-100; }
  .yellow-200 { background-color: @yellow-200; }
  .yellow-300 { background-color: @yellow-300; }
  .yellow-400 { background-color: @yellow-400; }
  .yellow-500 { background-color: @yellow-500; }
  .yellow-600 { background-color: @yellow-600; }
  .yellow-700 { background-color: @yellow-700; }
  .yellow-800 { background-color: @yellow-800; }
  .yellow-900 { background-color: @yellow-900; }
  .yellow-A100 { background-color: @yellow-A100; }
  .yellow-A200 { background-color: @yellow-A200; }
  .yellow-A400 { background-color: @yellow-A400; }
  .yellow-A700 { background-color: @yellow-A700; }

  .amber-50 { background-color: @amber-50; }
  .amber-100 { background-color: @amber-100; }
  .amber-200 { background-color: @amber-200; }
  .amber-300 { background-color: @amber-300; }
  .amber-400 { background-color: @amber-400; }
  .amber-500 { background-color: @amber-500; }
  .amber-600 { background-color: @amber-600; }
  .amber-700 { background-color: @amber-700; }
  .amber-800 { background-color: @amber-800; }
  .amber-900 { background-color: @amber-900; }
  .amber-A100 { background-color: @amber-A100; }
  .amber-A200 { background-color: @amber-A200; }
  .amber-A400 { background-color: @amber-A400; }
  .amber-A700 { background-color: @amber-A700; }

  .orange-50 { background-color: @orange-50; }
  .orange-100 { background-color: @orange-100; }
  .orange-200 { background-color: @orange-200; }
  .orange-300 { background-color: @orange-300; }
  .orange-400 { background-color: @orange-400; }
  .orange-500 { background-color: @orange-500; }
  .orange-600 { background-color: @orange-600; }
  .orange-700 { background-color: @orange-700; }
  .orange-800 { background-color: @orange-800; }
  .orange-900 { background-color: @orange-900; }
  .orange-A100 { background-color: @orange-A100; }
  .orange-A200 { background-color: @orange-A200; }
  .orange-A400 { background-color: @orange-A400; }
  .orange-A700 { background-color: @orange-A700; }

  .deep-orange-50 { background-color: @deep-orange-50; }
  .deep-orange-100 { background-color: @deep-orange-100; }
  .deep-orange-200 { background-color: @deep-orange-200; }
  .deep-orange-300 { background-color: @deep-orange-300; }
  .deep-orange-400 { background-color: @deep-orange-400; }
  .deep-orange-500 { background-color: @deep-orange-500; }
  .deep-orange-600 { background-color: @deep-orange-600; }
  .deep-orange-700 { background-color: @deep-orange-700; }
  .deep-orange-800 { background-color: @deep-orange-800; }
  .deep-orange-900 { background-color: @deep-orange-900; }
  .deep-orange-A100 { background-color: @deep-orange-A100; }
  .deep-orange-A200 { background-color: @deep-orange-A200; }
  .deep-orange-A400 { background-color: @deep-orange-A400; }
  .deep-orange-A700 { background-color: @deep-orange-A700; }

  .brown-50 { background-color: @brown-50; }
  .brown-100 { background-color: @brown-100; }
  .brown-200 { background-color: @brown-200; }
  .brown-300 { background-color: @brown-300; }
  .brown-400 { background-color: @brown-400; }
  .brown-500 { background-color: @brown-500; }
  .brown-600 { background-color: @brown-600; }
  .brown-700 { background-color: @brown-700; }
  .brown-800 { background-color: @brown-800; }
  .brown-900 { background-color: @brown-900; }

  .blue-grey-50 { background-color: @blue-grey-50; }
  .blue-grey-100 { background-color: @blue-grey-100; }
  .blue-grey-200 { background-color: @blue-grey-200; }
  .blue-grey-300 { background-color: @blue-grey-300; }
  .blue-grey-400 { background-color: @blue-grey-400; }
  .blue-grey-500 { background-color: @blue-grey-500; }
  .blue-grey-600 { background-color: @blue-grey-600; }
  .blue-grey-700 { background-color: @blue-grey-700; }
  .blue-grey-800 { background-color: @blue-grey-800; }
  .blue-grey-900 { background-color: @blue-grey-900; }

  .grey-50 { background-color: @grey-50; }
  .grey-100 { background-color: @grey-100; }
  .grey-200 { background-color: @grey-200; }
  .grey-300 { background-color: @grey-300; }
  .grey-400 { background-color: @grey-400; }
  .grey-500 { background-color: @grey-500; }
  .grey-600 { background-color: @grey-600; }
  .grey-700 { background-color: @grey-700; }
  .grey-800 { background-color: @grey-800; }
  .grey-900 { background-color: @grey-900; }

  .red-500, .red-600, .red-700, .red-A200, .red-A400, .red-A700,
  .pink-500, .pink-600, .pink-A200, .pink-A400, .pink-A700,
  .purple-300, .purple-400, .purple-A200, .purple-A400, .purple-A700,
  .deep-purple-300, .deep-purple-400, .deep-purple-A200,
  .indigo-300, .indigo-400, .indigo-A200, .indigo-A400,
  .blue-500, .blue-600, .blue-700, .blue-A200, .blue-A400, .blue-A700,
  .light-blue-500, .light-blue-600, .light-blue-700, .light-blue-800, .light-blue-A700,
  .cyan-500, .cyan-600, .cyan-700, .cyan-800,
  .teal-500, .teal-600, .teal-700,
  .green-500, .green-600, .green-700,
  .light-green-800, .light-green-900,
  .lime-900,
  .orange-800, .orange-900,
  .deep-orange-500, .deep-orange-600, .deep-orange-700, .deep-orange-800, .deep-orange-900, .deep-orange-A400, .deep-orange-A700,
  .brown-300, .brown-400,
  .blue-grey-400, .blue-grey-500 {
    .mui-text-full-white;
  }

  .red-800, .red-900,
  .pink-700, .pink-800, .pink-900,
  .purple-500, .purple-600, .purple-700, .purple-800, .purple-900,
  .deep-purple-500, .deep-purple-600, .deep-purple-700, .deep-purple-800, .deep-purple-900, .deep-purple-A400, .deep-purple-A700,
  .indigo-500, .indigo-600, .indigo-700, .indigo-800, .indigo-900, .indigo-A700,
  .blue-800, .blue-900,
  .light-blue-900,
  .cyan-900,
  .teal-800, .teal-900,
  .green-800, .green-900,
  .brown-500, .brown-600, .brown-700, .brown-800, .brown-900,
  .blue-grey-600, .blue-grey-700, .blue-grey-800, .blue-grey-900,
  .grey-600, .grey-700, .grey-800, .grey-900 {
    .mui-text-dark-white;
  }

  .orange-A700 {
    .mui-text-full-black;
  }
}