@import '../../styles/abstracts/variables';

@media (max-width: 768px) {
  .preview-layout {
    .preview-layout__page-content {
      padding: 16px !important;
      margin-bottom: 100px;
      background: white !important;

      @media (min-width: 768px) {
        padding: 24px 16px;
      }
    }

    .profile-photo {
      margin-top: unset;
    }

    .account-setting-new {
      padding: 0;
    }

    .ant-card-body {
      padding-top: 0 !important;
      > div {
        padding: 0 !important;
      }
    }

    .profile-modules {
      border: none;
    }

    .ant-collapse-content-box {
      padding: 12px !important;
    }

    .pannel-collapse__header {
      padding: 8px 12px !important;
    }

    .dragdrop-button {
      padding: 0 !important;
      height: 24px !important;
    }

    .profile-editor-header {
      padding: 0;
    }

    .profile-social-links {
      padding: 0;
    }

    .profile-theme {
      padding: 0;
    }

    .onboarding-theme {
      padding: 0 !important;
    }

    .preview-layout__content {
      background-color: white !important;
    }
  }
}

.preview-layout {
  background-color: $default;
  padding-bottom: 32px;

  &__header.ant-layout-header {
    padding: 32px 0;
    z-index: 100;
    background-color: $dark;
    line-height: 44px;
  }

  &__content {
    border-radius: 0;
    background-color: $dark;
  }

  &-creator-ui {
    background-color: $grey;
    padding-bottom: 0;

    .navbar-styles {
      z-index: 10;
    }

    //desktop view
    @media (min-width: 769px) {
      display: flex;
      flex-direction: row;
      height: 100vh;
      padding-left: 72px;

      .add-module-card {
        left: 104px;
      }
    }

    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
      padding-top: 64px;
      // height: 100vh;

      .add-module-card {
        left: 32px;
      }
    }

    .preview-layout__content {
      background-color: $grey;
    }

    // banner alteration
    & .ssx-subscription-banner__info .header-message {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &__page-content {
    padding: 32px;
    width: 100%;
    position: relative;
    background-color: $grey;
    border-radius: 16px;
    min-height: calc(100vh - 140px);

    &--trial-banner {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      min-height: calc(100vh - 192px);
    }

    &--banner-dismissed {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
  }

  &--additional-page {
    .preview-layout__page-content {
      padding: 32px 0;
    }

    &-fan-club {
      .preview-layout__page-content {
        padding: 36px 0;
      }
    }

    &-team-member {
      .preview-layout__page-content {
        padding: 36px 0;
      }
    }

    &-account-setting {
      .preview-layout__page-content {
        padding: 24px 0;
      }
    }
  }
}

.link-redirect-tooltip {
  margin-bottom: 20px;

  .ant-tooltip {
    &-inner {
      background: white;
      padding: 8px;
      text-align: center;
      font-weight: $semi-bold;
      font-size: 11px;
      color: black;
      max-width: 250px;
      line-height: 14px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
    }

    &-arrow-content {
      background: white;
    }
  }
}

.link-redirect-header {
  display: block;
  width: 24px;
  height: 24px;
  padding: 6px;
}