.admin-modal {
  .kv-modal-header {
    @extend .kv-p-3;

    background-color: rgb(0, 115, 170);

    .kv-modal-title {
      color: $white;
    }
  }
  .admin-modal-content {
    border-radius: 12px;
  }
}

.admin-modal-box {
  &,
  &-row,
  &-field {
    @extend .kv-w-100, .kv-d-flex;

    flex-direction: column;
  }

  $border-radius: 4px;

  border: 1px solid #ccc;
  border-radius: $border-radius;

  &:not(:last-child) {
    @extend .kv-mb-5;
  }

  &-header,
  &-row {
    &:first-child {
      border-top-left-radius: $border-radius;
      border-top-right-radius: $border-radius;
    }

    &:last-child {
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }

  &-header {
    @extend .kv-bold, .kv-px-4, .kv-py-3;

    background-color: $gray-200;
    border-bottom: 1px solid #ccc;
  }

  &-title {
    @extend .kv-p-0, .kv-m-0;

    font-size: 1.25em;
  }

  &-row {
    @extend .kv-p-4;
  }

  &-field {
    &--label {
      @extend .kv-bold, .kv-mb-2;
    }

    &--text,
    &--textarea {
      border: 1px solid #ddd;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
      border-radius: 2px;
    }

    &--text {
      height: 28px;
    }

    &--textarea {
      height: 160px;
    }
  }

  &-heading {
    @extend .kv-bold, .kv-mb-2;
  }

  &-image {
    max-width: 50%;

    border-radius: 4px;
  }
}

.kv-modal-submit-cancel-row {
  @extend .kv-pt-4;

  text-align: right;
  border-top: 1px solid #ccc;

  .kv-admin-button {
    &:not(:last-child) {
      @extend .kv-mr-2;
    }
  }
}