@import 'react-rg-designsystem/style/variables.scss';
@import './utility.scss';

.OnboardingScreen {
  height: 100%;

  .RGSidebarLeftList {
    width: 260px;
    overflow: auto;

    .buttons {
      position: sticky;
      bottom: 0;
      min-height: fit-content;
      display: flex;
      flex-direction: column;
      align-items: center;

      padding-top: 26px;
      padding-bottom: 26px;

      .RGButton {
        width: 145px;
      }
    }
  }

  &.desktop {
    width: 100%;

    .MoodImage {
      position: absolute;
      top: 0;
      left: 260px;
      right: 0;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .optionContainer {
      width: 100%;
      padding-top: 4px;

      background-color: $elevation-minus1-area;
    }
  }
}