/*
=========================================================
BLOG ALÍPIO
ADMIN — FORMULÁRIO / MODAL
=========================================================
*/


/* =========================================================
   JANELA
========================================================= */

.publication-dialog {
  width:
    min(
      820px,
      calc(100% - 32px)
    );

  max-height:
    calc(100vh - 40px);

  padding: 0;

  border: 0;

  border-radius: 18px;

  background:
    #ffffff;

  color:
    #082f55;

  overflow: hidden;

  box-shadow:
    0 30px 90px
    rgba(4, 31, 56, 0.30);
}


.publication-dialog::backdrop {
  background:
    rgba(3, 20, 37, 0.70);

  backdrop-filter:
    blur(3px);
}


.publication-dialog:not([open]) {
  display: none;
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.publication-form {
  max-height:
    calc(100vh - 40px);

  display: flex;

  flex-direction: column;

  background:
    #ffffff;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.publication-dialog__header {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap: 24px;

  padding:
    26px 28px 22px;

  border-bottom:
    1px solid #dce5ed;
}


.publication-dialog__header h2 {
  margin: 0;

  color:
    #082f55;

  font-size:
    1.45rem;

  line-height: 1.2;
}


.publication-dialog__header p:last-child {
  margin:
    8px 0 0;

  color:
    #6a7b8d;

  font-size:
    0.84rem;

  line-height: 1.5;
}


.dialog-close {
  width: 40px;

  height: 40px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background:
    #f0f4f7;

  color:
    #082f55;

  font-size:
    1.45rem;

  cursor: pointer;
}


.dialog-close:hover {
  background:
    #e3eaf0;
}


/* =========================================================
   CORPO
========================================================= */

.publication-form__body {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;

  padding:
    26px 28px;

  overflow-y: auto;
}


/* =========================================================
   CAMPOS
========================================================= */

.admin-field {
  display: grid;

  gap: 7px;
}


.admin-field--full {
  grid-column:
    1 / -1;
}


.admin-field > span {
  color:
    #163b5d;

  font-size:
    0.77rem;

  font-weight: 800;
}


.admin-field input,
.admin-field textarea,
.admin-field select {
  width: 100%;

  min-height: 46px;

  padding:
    10px 12px;

  border:
    1px solid #cdd9e3;

  border-radius: 9px;

  outline: none;

  background:
    #f8fafc;

  color:
    #082f55;

  font: inherit;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.admin-field textarea {
  min-height: 90px;

  resize: vertical;

  line-height: 1.55;
}


.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus {
  border-color:
    #0a5aa5;

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(10, 90, 165, 0.12);
}


.admin-field small {
  color:
    #7c8b99;

  font-size:
    0.68rem;

  line-height: 1.4;
}


/* =========================================================
   DESTAQUE
========================================================= */

.admin-switch {
  min-height: 72px;

  display: flex;

  align-items: center;

  gap: 13px;

  padding:
    14px 16px;

  border:
    1px solid #dce5ed;

  border-radius: 10px;

  background:
    #f9fbfc;

  cursor: pointer;
}


.admin-switch input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.admin-switch__control {
  position: relative;

  width: 46px;

  height: 26px;

  flex-shrink: 0;

  border-radius:
    999px;

  background:
    #cbd6df;

  transition:
    background 0.2s ease;
}


.admin-switch__control::after {
  content: "";

  position: absolute;

  top: 3px;

  left: 3px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background:
    #ffffff;

  box-shadow:
    0 1px 4px
    rgba(0, 0, 0, 0.18);

  transition:
    transform 0.2s ease;
}


.admin-switch input:checked
+ .admin-switch__control {
  background:
    #082f55;
}


.admin-switch input:checked
+ .admin-switch__control::after {
  transform:
    translateX(20px);
}


.admin-switch strong,
.admin-switch small {
  display: block;
}


.admin-switch strong {
  color:
    #082f55;

  font-size:
    0.78rem;
}


.admin-switch small {
  margin-top: 3px;

  color:
    #718293;

  font-size:
    0.68rem;
}


/* =========================================================
   RODAPÉ
========================================================= */

.publication-form__footer {
  display: flex;

  align-items: center;

  justify-content:
    flex-end;

  gap: 10px;

  padding:
    18px 28px;

  border-top:
    1px solid #dce5ed;

  background:
    #fafbfd;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 650px) {

  .publication-dialog {
    width:
      calc(100% - 20px);

    max-height:
      calc(100vh - 20px);

    border-radius: 14px;
  }


  .publication-form {
    max-height:
      calc(100vh - 20px);
  }


  .publication-dialog__header {
    padding:
      20px 18px;
  }


  .publication-form__body {
    grid-template-columns:
      1fr;

    padding:
      20px 18px;
  }


  .admin-field--full {
    grid-column:
      auto;
  }


  .publication-form__footer {
    padding:
      16px 18px;

    flex-direction:
      column-reverse;
  }


  .publication-form__footer button {
    width: 100%;
  }

}