:host {
  width: 100%;
  height: 100%;
  display: flex;
}

:host nav {
  height: 100%;
  width: 100%;
  flex: 0 0 10%;
  display: flex;
  align-items: center;
}

:host nav fsw-button, :host nav div {
  flex: 25%;
  height: 100%;
  width: 100%;
  margin: 1%;
}

:host main {
  flex: 0 0 90%;
  width: 100%;
  height: 100%;
  display: grid;
}

:host.horizontal {
  flex-direction: row;
}

:host.horizontal nav {
  flex-direction: column;
}

:host.horizontal.small main {
  grid-template-columns: repeat(10,1fr);
}

:host.horizontal.medium main {
  grid-template-columns: repeat(10,1fr);
}

:host.horizontal.large main {
  grid-template-columns: repeat(16,1fr);
}

:host.vertical {
  flex-direction: column;
}

:host.vertical nav {
  flex-direction: row;
}

:host.vertical main {
  grid-auto-flow: column;
}

:host.vertical.small main {
  grid-template-rows: repeat(10,1fr);
}

:host.vertical.medium main {
  grid-template-rows: repeat(10,1fr);
}

:host.vertical.large main {
  grid-template-rows: repeat(16,1fr);
}