@use 'variables' as *;

.cpt-message {
  box-sizing: border-box;
  padding: 0;
  position: relative;
  
  &.card {
    background-color: White;
    border: $border;
    box-shadow: $box-shadow;
    margin-bottom: $spacing-sm;
    padding: 0;
  }

  &:target .cpt-message-content {
    background-color: $yellow-highlighter;
  }

  &.my-message {
    margin-left: 10%;

    .cpt-message-content {
      background-color: $blue-highlighter;
    }
  }

  &.not-my-message {
    margin-right: 10%;
  }

  &.status-update-request {
    margin-left: 0;
    margin-right: 0;

    .cpt-message-content {
      background-color: unset;
    }
  }

  .cpt-message-content {
    font-size: 16px;
    padding: $spacing-sm;

    & > *:first-child {
      margin-top: 0;
    }

    & > *:last-child {
      margin-bottom: 0;
    }
  }

  .cpt-message-title {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: $spacing-sm;
  }

  .cpt-message-meta {
    background-color: $gray-wash;
    font-size: 12px;
    margin: 0;
    padding: $spacing-xs $spacing-sm;
  }
}

.cpt-new-message-form {
  background-color: $gray-wash;
  padding: $spacing-sm;

  h3 {
    margin-top: 0;
    margin-bottom: $spacing-sm;
  }

  .form-field {
    margin-top: 0;
    margin-bottom: $spacing-sm;

    input:not([type="checkbox"]),
    select,
    textarea {
      max-width: unset;
      width: 100%;
    }
  }

  label {
    font-size: 80%;
    font-weight: bold;
    line-height: $line-height-sm;
    margin-bottom: .25em;
  }

  .description {
    color: SlateGray;
    font-size: 80%;
    margin: .25em 0 ;
  }

  .submit {
    margin: 0;
  }
}