@import "/styles/variables";

.card {
  width: 100%;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid $dark-07;

  color: $dark;
  background-color: $dark-07;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
    color 0.3s ease-in-out;

  &:hover {
    background: $light;
    border-color: $purple-04;
  }

  &:active {
    background: #ececff;
    border-color: $purple-03;
  }
}
.card[color="orange"] {
  color: $orange;
  background-color: $orange-02;
  border-color: $orange-02;
  &:hover {
    background: #ffecda;
    border-color: #ffc2a5;
  }

  &:active {
    background: #ffe4cb;
    border-color: #ff905d;
  }
  &[disabled="disabled"] {
    user-select: none;
    pointer-events: none;
    cursor: not-allowed;
    border-color: $dark-05;
    color: $dark-05;
  }
}
.icon {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  display: inline-flex;
  margin-right: 8px;
  svg {
    width: 100%;
    height: 100%;
  }
}
.text {
  // margin-top: 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  // margin-bottom: 8px;
}
// .description {
//   //
// }
.smallText {
  margin-top: 8px;
}
.link {
  margin-top: 8px;
}
.footer {
  margin-top: 24px;
  color: $dark-02;
}
.card[color="orange"] {
  .footer {
    color: $orange;
  }
}
.card[big="big"] {
  width: 100%;
  padding: 48px 42px;
  border-radius: 24px;
  .text {
    font-size: 48px;
    line-height: 60px;
    margin-bottom: 0;
  }
  .icon {
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
  }
}

// fix
.full {
  height: 100%;
}
.card[height="full"] {
  height: 100%;
}
