@import '../../variables';

.App {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: color .2s, background-color .2s;

  .main {
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: stretch;

    .calendar-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      overflow-y: auto;

      .calendar {
        min-height: $calendar-height;
      }
    }
  }

  .capture-container {
    position: absolute;
    top: 0;
    left: 100vw;
    background-color: inherit;

    .fake-calendar {
      width: $calendar-width;
    }
  }
}

.App.dark {
  background-color: $theme-dark-background;
  color: $theme-dark-foreground;
}

.App.light {
  background-color: $theme-light-background;
  color: $theme-light-foreground;
}

.App.mobile {
  .tab-container {
    display: flex;
    height: 64px;
    border-bottom: 1px solid $color-border;

    .tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &.active {
        background-color: $color-border;
      }
    }
  }

  .main {
    .sidebar {
      flex: 1;
      border-right: none;

      .scroller {
        width: auto;
      }
    }
  }
}
