@import "colors";
@import "constants";

.card {
  padding: ($default-spacer * 3) ($default-spacer * 2);
  border: 1px solid $border-grey;
  margin-bottom: $default-spacer * 2;
  background: #FFFFFF;

  .card-title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: $default-spacer * 2;
  }

  &.featured {
    border-top: 8px solid $blue;

    .card-title {
      color: $blue;
    }
  }

  &.warning {
    border-top: 8px solid $orange;

    .card-title {
      color: $orange;
    }
  }

  &.feedback {
    max-width: 600px;
    margin: 30px auto;
    padding: ($default-spacer * 2) ($default-spacer * 4);
    font-size: small;
    border: 1px dashed $border-grey;
    background: $light-yellow;

    .card-title {
      margin-bottom: $default-spacer;
    }

    b {
      font-weight: bold;
    }
  }

  ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: $default-padding;
  }

  ol {
    list-style-type: decimal;
    list-style-position: inside;
    padding-left: $default-padding;
  }

  p:not(:last-of-type) {
    margin-bottom: $default-spacer;
  }
}

.card-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  grid-gap: 20px;
  margin: auto;
  margin-bottom: 20px;
}

.card-admin {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 236px;
  height: 200px;
  border-radius: 4px;
  border: solid 1px $border-grey;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;

  .card-admin-status-accept {
    color: #50AA75;
  }

  .card-admin-status-todo {
    color: #246AC5;
  }

  .card-admin-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: $default-spacer;
  }

  .card-admin-subtitle {
    font-size: 14px;
  }

  .card-admin-action {
    margin-top: auto;
  }
}