@import "../../../less/Common/Constants";

.splashScreenContainer {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .splashScreen {
    .flex-display();
    .flex-direction();
    text-align: left;
    margin: auto;
    padding-left: 21px;
    padding-right: 16px;
    max-width: 1168px;

    > * {
      justify-content: space-between;
    }

    > .title {
      position: relative; // To attach FeaturePanelLauncher as absolute
      color: @BaseHigh;
      font-size: 48px;
      padding-left: 0px;
      margin: 16px auto;
      text-align: center;
    }

    > .subtitle {
      color: @BaseHigh;
      font-size: 18px;
      padding-left: 0px;
      margin: 0px auto;
      text-align: center;
    }

    .mainButtonsContainer {
      .flex-display();
      text-align: center;
      cursor: pointer;
      margin: 40px auto;

      > .mainButton {
        min-width: 124px;
        max-width: 296px;
        padding: 32px 16px;
        background-color: @BaseLight;
        border: 1px solid #949494;
        box-sizing: border-box;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 4px;

        > .legendContainer {
          margin-left: 16px;
          text-align: left;

          .legend {
            font-family: @SemiboldFont;
            font-size: 18px;
          }

          .description {
            font-size: 10px;
          }

          .newDescription {
            font-size: 13px;
          }
        }
      }

      > :nth-child(n + 2) {
        margin-left: 32px;
      }
    }

    .moreStuffContainer {
      .flex-display();
      justify-content: space-between;

      .moreStuffColumn {
        flex-grow: 1;
        flex-basis: 0;
        min-width: 124px;
        max-width: 296px;

        > .title {
          font-size: 18px;
          font-family: @SemiboldFont;
          color: @BaseDark;
          padding: 0px;
          margin-bottom: 16px;
        }

        > ul {
          list-style: none;
          padding-left: 0px;
          margin-bottom: 0px;

          li {
            padding: @DefaultSpace;
            .flex-display();
            align-items: flex-start;

            > img {
              margin-right: @DefaultSpace;
              width: 24px;
              height: 24px;
            }

            .oneLineContent {
              margin-top: 4px;
            }

            .description {
              font-size: 10px;
              color: @BaseMediumHigh;
            }
          }
        }

        .tipContainer {
          padding: 8px 16px;
          width: 100%;
          cursor: pointer;
          .flex-display();
          .flex-direction();

          > .title {
            color: @BaseDark;
            padding: 0px;
            font-size: 12px;
          }
          > .description {
            color: @BaseDark;
          }

          &:not(:hover):not(:focus) {
            background-color: @BaseLow;
          }
        }

        &.commonTasks {
          li {
            cursor: pointer;
          }
        }

        &.tipsContainer {
          li {
            margin: 2px 0px;
          }
        }
      }
    }

    .focusable {
      &:hover {
        .hover();
      }

      &:focus {
        .focus();
      }

      &:active {
        .active();
      }
    }

    .notebookSplashScreenItem {
      padding: 12px 0 12px 12px;

      .itemText {
        margin-left: 12px;
        font-family: @SemiboldFont;
      }
    }
  }
}