@use "./vars";
$header-height: 30px;
$modal-height: 350px;
$modal-width: 350px;

.chakra-modal__content {
  font-family: "museo-sans", sans-serif;

  .chakra-modal__header.codap-modal-header {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: none;
    background-color: #f0f0f0;

    .codap-modal-icon-container {
      width: 30px;
      height: 30px;
      background-color: vars.$teal-dark;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .codap-modal-icon {
        height: 20px;
        width: 20px;
        &.white-icon {
          path {
            fill: white;
          }
        }
      }
    }

    .codap-header-title {
      border-bottom: solid #C1C5C7 1px;
      border-left: solid #C1C5C7 1px;
      padding-left: 5px;
      width: calc(100% - $header-height);
      height: $header-height;
      font-size: 12px;
      line-height: $header-height;
    }

    .codap-header-title-simple {
      padding-left: 8px;
      height: $header-height;
      font-size: 12px;
      line-height: $header-height;
    }

    button {
      top: 0;
    }
  }

  .chakra-modal__body {
    background-color: #f0f0f0;
    padding: 0 8px;
    box-sizing: border-box;
    width: inherit;
  }

  .chakra-modal__footer {
    background-color: #f0f0f0;
  }

  .chakra-form__label {
    align-items: center;
    margin-inline-end: 0;
  }
  input, textarea, select, .chakra-radio__control {
    background-color: white;
  }
}

.codap-modal-content {
  position: absolute !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.chakra-modal__content-container {
  position: absolute !important;
}
