/* Recommended to edit file in external code editor as Visual Studio CSS does not fully support nesting */

.color-palette-bar {
  display: flex;
  width: 100%;
  height: 10px;

  .palette {
    height: 100%;
  }

  .seafoam {
    background: var(--color-seafoam);
    flex: 2;
  }

  .lilac {
    background: var(--color-lilac);
    flex: 1;
  }

  .stone {
    background: var(--color-stone);
    flex: 1.75;
  }

  .empire-blue {
    background: var(--color-empire-blue);
    flex: 2;
  }

  .slate {
    background: var(--color-slate);
    flex: 2;
  }

  .navy {
    background: var(--color-navy);
    flex: 1;
  }
}

.homepage {
  .color-palette-bar {
    height: 12px;

    @media (min-width: 768px) {
      height: 20px;
    }
  }
}