@function size($size) {
  @return map-get($font-size, $size);
}

@function weight($weight) {
  @return map-get($font-weight, $weight);
}

.form-page {
  background-color: $white;
  &__header {
    @extend .top-0, .bg-white;
    z-index: 5;
  }
  .form-container {
    margin-bottom: 24px;
    .form-title {
      @extend .h6, .fw-semibold;
      color: $primary-text-clr;
    }
    .nested-form-title {
      color: $nested-form-section-color;
      margin-bottom: 16px;
    }
    &__inner {
      @extend .card, .p-4;
      background-color: var(--bs-gray-100);
      &.nested_section {
        padding: 1rem !important;
      }
    }
  }

  .form-section-container {
    @extend .p-4;
    margin-bottom: 40px;
  }

  .form-submit-button-container {
    @extend .position-absolute, .bottom-0, .bg-white, .py-3, .px-4, .w-100;
    border-top: 1px solid $gray-300;
    z-index: 5;
  }
}

//form field styles
.form-field {
  @extend .mb-4;
}

.field-label {
  @extend .form-label;
  &.required-label::after {
    content: " *";
    color: $red;
  }
}

.field-control {
  @extend .form-control;
}

//upload attachment style
[data-section="destroy-attachment"] {
  margin-top: 4px;
}
[data-section="image-preview"] {
  [data-section="destroy-attachment"] {
    background-color: $grey-lightest-clr;
    mix-blend-mode: multiply;
    padding: 8px;
    margin-bottom: 5px;
    .btn-ghost {
      float: right;
      margin-top: 12px;
    }
  }
}



//Form card UI
.form-card {
  @extend .card, .mt-3;
  background-color: var(--bs-gray-100);
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  .card-title-wrapper {
    @extend .d-flex, .align-items-center, .mb-3;
    &:hover {
      div:last-of-type {
        visibility: visible;
      }
    }
  }
  .card-title {
    font-size: $t4-text;
    color: var(--bs-tertiary-color);
    margin: 0;
  }
  .card-delete {
    visibility: hidden;
  }
}

.form-modal {
  .form-info-text {
    @extend .text-body, .mb-3;
  }
}

// Simple form UI
.simple_form {
  .input {
    @extend .mb-3;
  }
  label {
    @extend .form-label;
  }
  input {
    @extend .form-control;
  }
  input[type="submit"] {
    width: auto;
    float: right;
    @extend .mt-3;
  }
  .select-2 {
    appearance: auto;
    @extend .form-control;
  }
}

.nested-section {
  padding: 1.5rem;
  border: 1px solid $gray-300;
  background-color: $gray-100;
}

.discard-form {
  margin-left: 16px;
}

// Bulk Actions Dropdown
.bulk-action-item {

  form {
    width: 100%;
  }

  .bulk-action-icon {
    width: 20px;
    height: 20px;

    svg {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .bulk-action-button {
    @extend .d-flex, .align-items-center, .gap-2;
  
    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }

  a {
    display: flex;
    gap: 8px;
  }
}