@import url(./balloon.css);

.modal-container-personality {
  .modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
  }

  /* Modal Content/Box */
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 0.75em;
    width: 80%;
    width: fit-content;
  }
}

.modal-container-personality #myModalChangeText {
  form.insertar-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;

    & button {
      align-self: center;
      height: 36px;
    }

    [type='reset'] {
      height: auto;
      padding: 7px 8px 3px 8px;

      svg {
        width: 12px;
        height: 14px;
      }
    }

    & label {
      font-size: 16px;
      font-weight: 600;
    }

    textarea {
      field-sizing: content;
      resize: none;
      min-width: 250px;
    }
  }

  .form-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}

.modal-container-personality .modal-content button.close {
  --white: #fff;
  --width-button-close: 30px;
  --with-close-times-color: var(--white);
  --bg-color: rgb(24, 49, 83);

  --fa-primary-color: var(--with-close-times-color);
  --fa-secondary-color: rgb(24, 49, 83);
  --fa-secondary-opacity: 1;

  font-size: 30px;
  width: var(--width-button-close);
  height: var(--width-button-close);

  box-sizing: content-box;
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  line-height: 1;
  color: inherit;
  color: var(--with-close-close-color);
  font-size: calc(1em * 1.5);
  font-size: var(--with-close-close-font-size);

  background-color: transparent;
  border: none;

  opacity: 1 !important;

  sgv {
    width: var(--width-button-close);
    height: var(--width-button-close);
  }

  .fa-primary {
    fill: var(--fa-primary-color, currentColor);
    opacity: var(--fa-primary-opacity, 1);
  }

  .fa-secondary {
    fill: var(--fa-secondary-color, currentColor);
    opacity: var(--fa-secondary-opacity, 0.4);
  }

  &:hover,
  &:hover .fa-secondary,
  &:focus {
    text-decoration: none;
    cursor: pointer;
    color: rgb(224, 49, 49);
    opacity: 1;
    fill: rgb(224, 49, 49);
  }

  &:is(:focus, .focus, .focused) {
    --focus-outline-width: calc(1em * 3 / 16);
    --focus-outline-color: #74c0fc;
    --focus-outline: solid var(--focus-outline-width) var(--focus-outline-color);
    outline: var(--focus-outline);
    outline-offset: calc(1em * 1 / 16);
    outline-offset: var(--focus-outline-offset);
  }
}