@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;
        display: flex;
        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;
            margin-bottom: @DefaultSpace;
            font-size: 18px;
          }

          .description {
            font-size: 10px;
          }
        }
      }

      >: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;
            }

            .twoLineContent {
              margin-top: -5px;

              :nth-child(2) {
                font-size: 9px;
              }
            }

            .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();
      }
    }
  }
}