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

.profile-theme {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 4px 36px;
  height: 100%;
  .onboarding-theme {
    &.active {
      max-width: 400px;
    }
  }
  .content-card__warning {
    padding: 8px 16px;
    background-color: $serenade;

    .content-card__content {
      font-size: 15px !important;
      line-height: 20px !important;
      letter-spacing: -0.24px;
      color: $darkGray;
      margin: 0 12px;
    }
  }

  .disabled {
    opacity: 0.4;

    * {
      pointer-events: none;
    }
  }

  &__card {
    border-radius: 8px;

    &--column1 {
      border-right: 1px solid $gray2;

      @include mobile {
        width: 100%;
        border-right: none !important;
      }
    }

    &--theme-type,
    &--theme-overlay {
      display: flex;

      &__item {
        width: 56px;
        height: 56px;
        border-radius: 8px;
        background: linear-gradient($gray2, $gray2);
        margin-top: 8px;
        cursor: pointer;
        user-select: none;
        padding: 1px;

        &--content {
          padding: 10px;
          background: #ffffff;
          border-radius: 6px;
          height: 100%;
          position: relative;
          overflow: hidden;

          &--image {
            width: 32px;
            height: 32px;
            border: 1px solid $gray2;
            border-radius: 50%;
          }

          &__color--picker {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid $gray2;
            box-sizing: border-box;
            width: 32px;
            height: 32px;
            border-radius: 50%;

            &--dark {
              background-color: $dark;
            }
            &--light {
              background-color: $white;
            }
            &--custom {
              background: radial-gradient(
                50% 50% at 50% 50%,
                #ffffff 0%,
                rgba(255, 255, 255, 0) 100%
              );
            }
          }
        }

        &--active {
          background: linear-gradient(
            270deg,
            #17e391 21.47%,
            #58e5df 77.04%,
            #60e5e8 77.05%
          );
          padding: 2px;
          z-index: 0;
        }

        &--wrapper {
          box-sizing: border-box;
        }

        &--wrapper:not(:first-child) {
          margin-left: 20px;
        }
      }

      &__tooltip {
        border-radius: 8px;
        max-width: 351px;
        padding-top: 2px;

        @include mobile {
          max-width: 280px;
        }

        &.ant-tooltip-placement-bottomLeft {
          .ant-tooltip-arrow {
            left: 2px;
          }
        }

        .ant-tooltip {
          &-inner {
            background: $white;
            border: 1px solid $grey2;
            border-radius: 8px;
            color: $grey4;
            padding: 12px;
            font-size: $small;
            margin-left: -28px;

            @include mobile {
              margin-left: 0;
            }
          }

          &-arrow {
            top: -10px;

            &-content {
              box-shadow: none;
              border: 1px solid $grey2;
              border-bottom-width: 0;
              width: 8px;
              height: 8px;
            }
          }
        }
      }
    }

    &--theme-overlay--disabled {
      * {
        opacity: 0.4;
      }
    }
  }
}