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

.select-content-type {
  &__wrapper {
    position: relative;
    background-color: $white;
    border-radius: 0 0 8px 8px;

    &--content {
      overflow: hidden;
    }
  }

  &__content-icon {
    height: 40px;
  }

  &__controls {
    column-gap: 8px;
  }

  &__content--type {
    &__item {
      cursor: pointer;
      flex-direction: column;
      height: 100%;
      border-radius: 16px;
      padding: 2px;
      background: linear-gradient($border2, $border2);

      svg {
        width: 40px;
        height: 40px;
      }

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

      &--content {
        padding: 24px;
        background: #ffffff;
        border-radius: 14px;
        height: 100%;
        align-content: flex-start;
      }

      &__desc {
        color: $gray4;
        margin-top: 8px;
        min-height: fit-content;
      }
    }

    .btn-continue {
      margin-top: 32px;
    }
  }
}

@media only screen and (max-height: 660px) {
  .select-content-type {
    &__content--type {
      &__cards {
        margin-top: 10px !important;
      }

      .btn-continue {
        margin-top: 20px !important;
      }
    }
  }
}
