@import "../../theme.scss";

#interactiveCard {
  border: 1px solid rgb(232, 232, 238);
  box-shadow: rgba(163, 169, 175, 0.06) 1px 1px 6px 2px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

  &:hover {
    box-shadow: rgba(163, 169, 175, 0.12) 1px 2px 12px 4px;
  }
}

.interactiveCard-selected {
  #interactiveCard {
    border-color: $secondary;
    box-shadow: #8134af0f 1px 1px 6px 1px;

    &:hover {
      box-shadow: #8134af1f 1px 2px 12px 2px;
    }
  }
}

.interactiveCard-clickable {
  cursor: pointer;

  & * {
    cursor: pointer;
  }
}

#interactiveCard-radio {
  & > span {
    padding: 0;
  }

  .radio-unchecked {
    color: rgb(211, 211, 216);
  }
}

.interactiveCard-contentWrapper {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;

  .interactiveCard-radioContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .interactiveCard-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;

    h3 {
      margin: 0;
      color: $secondary;
      font-size: 1.1rem;
    }

    p.interactiveCard-meta {
      margin: 0;
      color: $text-secondary;
      margin-inline-end: 12px;
      font-size: 0.875rem;

      &:last-of-type {
        margin: 0;
      }

      span {
        font-weight: 600;
      }
    }

    .interactiveCard-metaContainer {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .inputField-root .inputField-labelWrapper > label {
      color: #5b5b5b !important;
      font-weight: 600 !important;
      font-size: 0.875rem !important;
      width: auto !important;
    }
  }

  .bio-InteractiveCard-content {
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
  }

  .interactiveCard-icon {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}