.worksheetOverlayButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
  border: none;
  box-shadow: 2px 2px 10px var(--color-shadow);
  z-index: 1200;
}

.overlayModal {
  position: fixed;
  width: 43.75%;
  height: 80%;
  background: var(--color-surface);
  transition:
    right 0.5s ease-in-out,
    bottom 0.5s ease-in-out;
  z-index: 1100;
  border: 2px solid var(--color-border);
  box-shadow: 0 0 10px 10px var(--color-shadow);
  overflow-y: auto;
  padding: 10px;
  border-radius: 10px;
}

@media (max-width: calc(768px - 0.5px)) {
  .overlayModal {
    width: 100%;
  }
}

.overlayModalHidden {
  right: -100%;
  bottom: 0%;
  box-shadow: none;
}

@media (max-width: calc(768px - 0.5px)) {
  .overlayModalHidden {
    right: 0%;
    bottom: -100%;
  }
}

.overlayModalVisible {
  right: 0%;
  bottom: 0%;
}

.expandBtn {
  padding: 3px;
  border-radius: 6px;
  background-color: var(--color-bg-button);
  color: var(--color-text-secondary);
  position: absolute;
  top: 8px;
  z-index: 1101;
  transition:
    transform 0.05s linear,
    background-color var(--trans-dur),
    color var(--trans-dur);
}

.expandIcon {
  display: block;
}
