@import './apps/commudle-admin/src/assets/styles/variables';

.features {
  width: fit-content;

  > nb-card {
    width: fit-content;
    margin: 0;

    .item-container {
      > div {
        display: flex;

        &:not(:first-child):hover {
          .item {
            background-color: $lightgreen2 !important;
          }
        }

        .item {
          border-bottom: 1px solid $lightgrey;
          width: 320px;
          padding: $space-12;

          &.purchase-button {
            border: none;
          }

          &.header {
            top: 200px;
          }

          &.feature {
            font-weight: 500;
            font-size: $fs-tag;

            &.freeplan {
              background-color: white;
              font-size: $fs-text;
            }

            &.paidplan.header {
              > div {
                margin-bottom: $space-12;

                h3 {
                  margin-bottom: 0;
                  line-height: 26px;

                  small {
                    font-size: $fs-text;
                    font-weight: 600;
                  }
                }

                p {
                  margin: 0;
                  font-weight: 600;
                }
              }
            }

            &.paidplan {
              background-color: $lightgreen;
              font-size: $fs-text;
            }

            &.enterpriseplan {
              font-size: $fs-text;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: $tab-width) {
    width: 90vw;
    overflow-x: auto;
  }
}
