.generic-template {
  display: grid;
  grid-auto-rows: 64px;
  position: relative;
  gap: var(--base);
}
.grid-demo > .container:last-child {
  margin-bottom: 640px;
}
.grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  letter-spacing: 1;
  border-radius: var(--base);
  border: 1px solid var(--grid-item-border-color);
  color: var(--grid-item-color);
  background-color: var(--grid-item-bg);
  --grid-item-border-color: #8edd8e;
  --grid-item-color: #248424;
  --grid-item-bg: #bfecbf;
}
.theme-dark .grid__item {
  --grid-item-border-color: #1a5e1a;
}
.theme-dark .grid__item {
  --grid-item-color: #5ecf5e;
}
.theme-dark .grid__item {
  --grid-item-bg: #0f380f;
}
.grid__item--lightgreen {
  --grid-item-border-color: #b6e587;
  --grid-item-color: #50871a;
  --grid-item-bg: #d5f0ba;
}
.theme-dark .grid__item--lightgreen {
  --grid-item-border-color: #396012;
}
.theme-dark .grid__item--lightgreen {
  --grid-item-color: #96d954;
}
.theme-dark .grid__item--lightgreen {
  --grid-item-bg: #223a0b;
}
.grid__item--lime {
  --grid-item-border-color: #d6ec80;
  --grid-item-color: #7b9413;
  --grid-item-bg: #e8f4b6;
}
.theme-dark .grid__item--lime {
  --grid-item-border-color: #586a0e;
}
.theme-dark .grid__item--lime {
  --grid-item-color: #c5e449;
}
.theme-dark .grid__item--lime {
  --grid-item-bg: #354008;
}
.grid__item--teal {
  --grid-item-border-color: #80e1c4;
  --grid-item-color: #148663;
  --grid-item-bg: #b6eedd;
}
.theme-dark .grid__item--teal {
  --grid-item-border-color: #0e5f47;
}
.theme-dark .grid__item--teal {
  --grid-item-color: #49d4ab;
}
.theme-dark .grid__item--teal {
  --grid-item-bg: #09392b;
}
.grid__item--red {
  --grid-item-border-color: #f08686;
  --grid-item-color: #8d1e1e;
  --grid-item-bg: #f6baba;
}
.theme-dark .grid__item--red {
  --grid-item-border-color: #651515;
}
.theme-dark .grid__item--red {
  --grid-item-color: #ea5353;
}
.theme-dark .grid__item--red {
  --grid-item-bg: #3d0d0d;
}
.grid__item--deeporange {
  --grid-item-border-color: #e79176;
  --grid-item-color: #963315;
  --grid-item-bg: #f1c0b1;
}
.theme-dark .grid__item--deeporange {
  --grid-item-border-color: #6b250f;
}
.theme-dark .grid__item--deeporange {
  --grid-item-color: #dd613c;
}
.theme-dark .grid__item--deeporange {
  --grid-item-bg: #401609;
}
.grid__item--orange {
  --grid-item-border-color: #fbb769;
  --grid-item-color: #ae5f04;
  --grid-item-bg: #fdd6a9;
}
.theme-dark .grid__item--orange {
  --grid-item-border-color: #7c4403;
}
.theme-dark .grid__item--orange {
  --grid-item-color: #fa9829;
}
.theme-dark .grid__item--orange {
  --grid-item-bg: #4b2902;
}
.grid__item--amber {
  --grid-item-border-color: #fbd374;
  --grid-item-color: #a87807;
  --grid-item-bg: #fde6af;
}
.theme-dark .grid__item--amber {
  --grid-item-border-color: #785505;
}
.theme-dark .grid__item--amber {
  --grid-item-color: #fac038;
}
.theme-dark .grid__item--amber {
  --grid-item-bg: #483303;
}
.grid__item--yellow {
  --grid-item-border-color: #f8e977;
  --grid-item-color: #a69409;
  --grid-item-bg: #fbf2b1;
}
.theme-dark .grid__item--yellow {
  --grid-item-border-color: #776a06;
}
.theme-dark .grid__item--yellow {
  --grid-item-color: #f5df3d;
}
.theme-dark .grid__item--yellow {
  --grid-item-bg: #473f04;
}
.grid__item--blue {
  --grid-item-border-color: #94beee;
  --grid-item-color: #144e91;
  --grid-item-bg: #c2daf5;
}
.theme-dark .grid__item--blue {
  --grid-item-border-color: #0e3867;
}
.theme-dark .grid__item--blue {
  --grid-item-color: #65a1e6;
}
.theme-dark .grid__item--blue {
  --grid-item-bg: #08213e;
}
.grid__item--lightblue {
  --grid-item-border-color: #97d2ed;
  --grid-item-color: #25769c;
  --grid-item-bg: #c4e5f5;
}
.theme-dark .grid__item--lightblue {
  --grid-item-border-color: #1b546f;
}
.theme-dark .grid__item--lightblue {
  --grid-item-color: #6bbfe6;
}
.theme-dark .grid__item--lightblue {
  --grid-item-bg: #103343;
}
.grid__item--cyan {
  --grid-item-border-color: #84dfe8;
  --grid-item-color: #15828c;
  --grid-item-bg: #b9edf2;
}
.theme-dark .grid__item--cyan {
  --grid-item-border-color: #0f5d64;
}
.theme-dark .grid__item--cyan {
  --grid-item-color: #4fd2de;
}
.theme-dark .grid__item--cyan {
  --grid-item-bg: #09383c;
}
.grid__item--purple {
  --grid-item-border-color: #dc95e5;
  --grid-item-color: #782982;
  --grid-item-bg: #ebc2f0;
}
.theme-dark .grid__item--purple {
  --grid-item-border-color: #561d5d;
}
.theme-dark .grid__item--purple {
  --grid-item-color: #cd67da;
}
.theme-dark .grid__item--purple {
  --grid-item-bg: #331238;
}
.grid__item--deeppurple {
  --grid-item-border-color: #c3a2f1;
  --grid-item-color: #5b3490;
  --grid-item-bg: #ddcaf7;
}
.theme-dark .grid__item--deeppurple {
  --grid-item-border-color: #412567;
}
.theme-dark .grid__item--deeppurple {
  --grid-item-color: #a97bea;
}
.theme-dark .grid__item--deeppurple {
  --grid-item-bg: #2c1946;
}
.grid__item--pink {
  --grid-item-border-color: #ec87a9;
  --grid-item-color: #8b1d41;
  --grid-item-bg: #f4bbce;
}
.theme-dark .grid__item--pink {
  --grid-item-border-color: #63142f;
}
.theme-dark .grid__item--pink {
  --grid-item-color: #e35484;
}
.theme-dark .grid__item--pink {
  --grid-item-bg: #3c0c1c;
}
.grid__item--indigo {
  --grid-item-border-color: #9ba8ea;
  --grid-item-color: #33428e;
  --grid-item-bg: #c6cdf3;
}
.theme-dark .grid__item--indigo {
  --grid-item-border-color: #252f65;
}
.theme-dark .grid__item--indigo {
  --grid-item-color: #7083e1;
}
.theme-dark .grid__item--indigo {
  --grid-item-bg: #161c3d;
}
.grid-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  will-change: opacity;
}
.s-page .grid-overlay {
  display: none;
}
.grid-overlay,
.grid-overlay > *[class^="grid-overlay-"] {
  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.grid-overlay__content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--base-6);
  border-radius: var(--base-6);
  z-index: 1;
  transform: scale(0.9);
  will-change: transform;
  border: 1px solid;
  box-shadow: var(--elevation-4);
  background-color: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.12);
}
.theme-dark .grid-overlay__content {
  background-color: #2d2d2d;
}
.theme-dark .grid-overlay__content {
  border-color: rgba(255, 255, 255, 0.18);
}
.grid-overlay__icon {
  pointer-events: none;
  width: var(--base-6);
}
.grid-overlay__icon::before {
  transform: scale(0.5);
  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}
.grid-overlay__button {
  font-size: var(--font-size-button);
  font-weight: 400;
  font-variation-settings: var(--body-font-variantion-settings);
  padding: 0 var(--base-3);
}
.grid-overlay__link {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: none !important;
  background-color: #FFFFFF;
  opacity: 0.24;
}
.theme-dark .grid-overlay__link {
  background-color: #131313;
}
.grid-overlay:hover {
  opacity: 1;
}
.grid-overlay:hover .grid-overlay__icon,
.grid-overlay:hover .grid-overlay__icon::before {
  transform: scale(1);
}
.grid-overlay--visible {
  opacity: 1;
}
.grid-overlay--visible .grid-overlay__content {
  transform: none;
  will-change: none;
}
.grid-overlay--no-events {
  pointer-events: none;
}
#grid-flow-dense-demo:hover {
  grid-auto-flow: dense;
}
#responsive-template {
  grid-template-areas: "item-a item-a item-a item-a item-c item-c item-c item-c item-c item-b item-b item-b" "item-d item-d item-d item-d item-d item-d item-d item-e item-e item-e item-e item-e";
}
@media screen and (max-width: 960px) {
  #responsive-template {
    grid-template-areas: "item-d item-d item-d item-d item-d item-d item-d item-d item-d item-d item-d item-d" "item-c item-c item-c item-b item-b item-b item-b item-b item-b item-b item-b item-b" "item-a item-a item-a item-a item-a item-e item-e item-e item-e item-e item-e item-e";
  }
}
@media screen and (max-width: 840px) {
  #responsive-template {
    grid-template-areas: "item-b item-b item-b item-a item-a item-a item-a item-a item-a item-c item-c item-c" "item-b item-b item-b item-d item-d item-d item-e item-e item-e item-c item-c item-c" "item-b item-b item-b item-d item-d item-d item-e item-e item-e item-c item-c item-c" "item-b item-b item-b item-d item-d item-d item-e item-e item-e item-c item-c item-c";
  }
}
@media screen and (max-width: 600px) {
  #responsive-template {
    grid-template-areas: "item-a item-a item-a item-a item-a item-a item-a item-a item-a item-a item-a item-a" "item-b item-b item-b item-b item-b item-b item-b item-b item-b item-b item-b item-b" "item-c item-c item-c item-c item-c item-c item-c item-c item-c item-c item-c item-c" "item-d item-d item-d item-d item-d item-d item-d item-d item-d item-d item-d item-d" "item-e item-e item-e item-e item-e item-e item-e item-e item-e item-e item-e item-e";
  }
}
@media screen and (max-width: 600px) {
  #responsive-template {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "item-a item-b item-c item-d item-e";
  }
}
.rt-item-a {
  grid-area: item-a;
}
.rt-item-c {
  grid-area: item-c;
}
.rt-item-b {
  grid-area: item-b;
}
.rt-item-d {
  grid-area: item-d;
}
.rt-item-e {
  grid-area: item-e;
}
.minmax-template {
  display: grid;
  grid-auto-rows: 64px;
}
.minmax-template.minmax-1 {
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}
.minmax-template.minmax-2 {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.grid-spacing-demo {
  grid-template-columns: repeat(4, 64px);
  grid-template-rows: repeat(4, 64px);
  padding: var(--base-2);
  border: 1px solid;
  border-radius: var(--radius);
  border-color: rgba(0, 0, 0, 0.12);
}
.theme-dark .grid-spacing-demo {
  border-color: rgba(255, 255, 255, 0.18);
}
.grid-spacing-demo-form-group {
  display: grid;
  grid-template-columns: 1fr;
}
.grid-demo-1 body {
  padding-top: 3rem;
}
.grid-demo-1 .grid {
  margin: 2rem 0;
  grid-gap: var(--base-4);
}
.grid-demo-1 p {
  color: rgba(0, 0, 0, 0.6);
}
.theme-dark .grid-demo-1 p {
  color: rgba(255, 255, 255, 0.7);
}
.grid-demo-2 body {
  padding-top: 3rem;
}
.grid-demo-2 p {
  color: rgba(0, 0, 0, 0.6);
}
.theme-dark .grid-demo-2 p {
  color: rgba(255, 255, 255, 0.7);
}
.grid-demo-2 .ticket {
  grid-template-columns: none;
  grid-template-areas: "header header header header header header" "something description description comments comments history" "files files files files files history";
}
.grid-demo-2 .ticket .hero {
  grid-area: hero;
}
.grid-demo-2 .ticket .header {
  display: grid;
  grid-area: header;
  padding-bottom: 2rem;
  grid-template-columns: minmax(64px, 96px) 1fr;
  grid-gap: calc(var(--base) * 4);
}
.grid-demo-2 .ticket .header .label {
  transform: translateY(-6px);
  margin-top: 16px;
}
.grid-demo-2 .ticket .header .icon {
  width: 100%;
  --aspect-ratio: 1/1;
}
.grid-demo-2 .ticket .header .icon::before {
  font-size: calc(var(--icon-small-font-size) * 2);
}
.grid-demo-2 .ticket .header .icon::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.grid-demo-2 .ticket .something {
  grid-area: something;
}
.grid-demo-2 .ticket .description {
  grid-area: description;
}
.grid-demo-2 .ticket .comments {
  grid-area: comments;
}
.grid-demo-2 .ticket .history {
  grid-area: history;
}
.grid-demo-2 .ticket .files {
  grid-area: files;
}
.grid-demo-2 .ticket .files .card-image {
  min-height: 128px;
}
.grid-demo-2 .ticket .files .card-image img {
  height: 64px;
}
.grid-demo-2 .ticket .something,
.grid-demo-2 .ticket .description {
  border-right: 1px solid;
  border-color: rgba(0, 0, 0, 0.12);
}
.theme-dark .grid-demo-2 .ticket .something,
.theme-dark .grid-demo-2 .ticket .description {
  border-color: rgba(255, 255, 255, 0.18);
}
.grid-demo-2 .tile {
  padding-bottom: 16px;
}
.grid-demo-2 .tile .tile-icon {
  height: 40px;
  width: 40px;
  line-height: 1;
}
.grid-demo-2 .tile .tile-subtitle {
  margin-bottom: 0;
}
.grid-demo-2 .grid-files {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
@media screen and (max-width: 840px) {
  .grid-demo-2 .ticket {
    grid-template-areas: "header header header" "something description history" "comments comments history" "files files files";
  }
  .grid-demo-2 .ticket .description {
    border: 0;
  }
}
@media screen and (max-width: 600px) {
  .grid-demo-2 .ticket {
    grid-template-areas: "header header" "something description" "comments history" "files files";
  }
  .grid-demo-2 .ticket .header {
    grid-template-columns: 1fr;
    grid-template-rows: 48px auto;
  }
  .grid-demo-2 .ticket .header .icon {
    width: 48px;
    height: 48px;
  }
  .grid-demo-2 .ticket .header .icon::before {
    font-size: var(--icon-small-font-size);
  }
  .grid-demo-2 .ticket .header .icon::after {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .grid-demo-2 .ticket {
    grid-template-areas: "header" "something" "description" "comments" "files" "history";
  }
  .grid-demo-2 .ticket .something {
    border: 0;
  }
}
.grid-demo-3 .app {
  padding: 40px;
  display: grid;
  height: 100%;
  grid-template-columns: 256px auto;
  grid-template-rows: 72px auto 72px;
  grid-template-areas: "header header" "sidebar form" "sidebar footer";
}
.grid-demo-3 .app.sidebar-collapsed {
  grid-template-columns: 72px auto;
}
.grid-demo-3 .app.sidebar-collapsed aside .text {
  text-orientation: sideways-right;
  writing-mode: vertical-rl;
  transform: rotateZ(180deg);
}
.grid-demo-3 nav {
  grid-area: header;
}
.grid-demo-3 aside {
  grid-area: sidebar;
}
.grid-demo-3 section {
  grid-area: form;
}
.grid-demo-3 footer {
  grid-area: footer;
}
.grid-demo-4 .app {
  padding: 40px;
  display: grid;
  height: 100%;
  grid-template-columns: 256px auto;
  grid-template-areas: "sidebar form";
}
.grid-demo-4 nav {
  grid-area: sidebar;
}
.grid-demo-4 section {
  grid-area: form;
  grid-template-rows: 64px auto;
  grid-template-areas: "form-header" "form-content";
}
.grid-demo-4 section #form-header {
  grid-area: form-header;
}
.grid-demo-4 section #form-content {
  grid-area: form-content;
}
.grid-demo-4 section #form-content {
  grid-template-columns: 256px auto;
}
.grid-demo-4 section .list-frame,
.grid-demo-4 section .detail-frame {
  padding: 32px;
}
.grid-demo-4 section .list-frame {
  display: grid;
  grid-auto-rows: 12px;
  grid-gap: calc(var(--base) * 3);
}
.grid-demo-4 section .detail-frame {
  grid-template-rows: max-content;
}
.grid-demo-4 section .list-item,
.grid-demo-4 section .detail-item {
  border-radius: var(--radius);
  background-color: #d2d2d2;
  color: #828282;
  transition: all 0.2s ease-out;
  transition: all 0.15s ease-out;
}
.theme-dark .grid-demo-4 section .list-item,
.theme-dark .grid-demo-4 section .detail-item {
  background-color: #2d2d2d;
}
.theme-dark .grid-demo-4 section .list-item,
.theme-dark .grid-demo-4 section .detail-item {
  color: #969696;
}
.grid-demo-4 section .list-item:active,
.grid-demo-4 section .detail-item:active {
  transition-duration: 0.1s;
}
.grid-demo-4 section .list-item:hover {
  background-color: #bfbfbf;
}
.theme-dark .grid-demo-4 section .list-item:hover {
  background-color: #404040;
}
.grid-demo-4 section .fake-input {
  border: 1px solid;
  border-radius: var(--radius);
  border-color: rgba(0, 0, 0, 0.12);
  padding: 0 8px;
  height: 32px;
  display: flex;
  align-items: center;
}
.theme-dark .grid-demo-4 section .fake-input {
  border-color: rgba(255, 255, 255, 0.18);
}
.grid-demo-4 section #detail-top {
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  grid-auto-rows: max-content;
}
.grid-demo-4 section #detail-bottom {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.grid-demo-4 section .info-1 {
  grid-auto-rows: max-content;
}
.grid-demo-4 section .info-1 #group-a1 {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.grid-demo-4 section .info-2 {
  grid-auto-rows: max-content;
}
.grid-demo-4 section .list-1 {
  border: 1px solid;
  border-radius: var(--radius);
  border-color: rgba(0, 0, 0, 0.12);
}
.theme-dark .grid-demo-4 section .list-1 {
  border-color: rgba(255, 255, 255, 0.18);
}
.grid-demo-4 section .gallery {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  grid-auto-rows: 64px;
  grid-gap: calc(var(--base) * 2);
  padding: 32px;
  border: 1px solid;
  border-radius: var(--radius);
  border-color: rgba(0, 0, 0, 0.12);
}
.theme-dark .grid-demo-4 section .gallery {
  border-color: rgba(255, 255, 255, 0.18);
}
@media screen and (max-width: 960px) {
  .grid-demo-4 .app {
    grid-template-columns: 64px auto;
  }
  .grid-demo-4 .app nav .text {
    text-orientation: sideways-right;
    writing-mode: vertical-rl;
    transform: rotateZ(180deg);
  }
}

/*# sourceMappingURL=docs-grid.css.map */