@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

:root {
  --header-background: #fff;
  --primary-color: #4285f4;
  --rounded-corners: calc(var(--gap) * 1.5);
  --file-background: #f1f1f1;
  --primary-font: "Ubuntu", sans-serif;
  --option-hover-background: rgb(0, 0, 0, 0.05);
  --file-selected-background: #88f7ff;
  --file-selected-color: #000;
  --file-hover-background: #e7e7e7;
}

html,
body {
  font-family: var(--primary-font);
  min-height: 100%;
}

.app.body {
  position: relative;
  z-index: 0;
}

.drive-items {
  display: grid;
  padding: calc(var(--gap));
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gap));
}

.header .left,
.header .right,
.header .center {
  width: 33%;
}

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

.header .right {
  justify-content: right;
}

.file-item {
  display: flex;
  background-color: var(--file-background);
  padding: calc(var(--gap));
  border-radius: var(--rounded-corners, 1rem);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.file-item-content {
  text-align: center;
}

.file-item-content .icon {
  font-size: 250%;
}

.file-item:active {
  opacity: 0.4;
}

.drive-items .file-item {
  --border-color: #e4e4e4;
  border: solid 1px var(--border-color);
  overflow: hidden;
}

.drive-items .file-item.file-selected {
  background-color: var(--file-selected-background);
  color: var(--file-selected-color);
}

.drive-items .file-item:not(.file-selected):hover {
  background-color: var(--file-hover-background);
}

.drive-items .file-item:hover {
  box-shadow: 0 10px 29px -10px rgba(0, 0, 0, 0.15);
}

.total-size {
  font-weight: bolder;
}

.file-menu .file-item {
  --file-background: var(--theme-background, #fff);
  pointer-events: none;
}

.file-item go-icon {
  font-size: 200%;
}

.drive-menu .ViewContent {
  width: 100%;
}

app-nav {
  display: flex;
  align-items: center;
}

go-options-content go-option:active,
go-options-content .go-option:active {
  background-color: var(--option-hover-background);
}

@media (min-width: 768px) {
  .drive-items {
    grid-template-columns: repeat(auto-fit, minmax(50%, 256px));
  }

  .drive-menu .ViewContent {
    max-width: 256px;
  }

  go-options-content go-option:hover,
  go-options-content .go-option:hover {
    background-color: var(--option-hover-background);
  }
}

@media (min-width: 1280px) {
  .drive-items {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--gap) * 1.5);
  }
}