/* ========================
 * BASE ELEMENTS
 * ======================== */
.admin {
  --w-sidebar: 150px;
  height: calc(100vh - var(--h-user-navbar) - 0.53rem);
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr;
  overflow-y: hidden;
}

.admin__main {
  height: calc(100vh - var(--h-user-navbar) - 1.53rem);
  overflow-y: auto;
  padding: 0.5rem 1rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.admin__main--edit {
  grid-template-rows: auto auto 1fr auto;
}

.admin__sidebar {
  padding: 0.5rem 0;
  color: var(--c-admin_sidebar-text);
  background-color: var(--c-admin_sidebar-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ==================
 * SIDEBAR MENU
 * ================== */
.admin_sidebar__menu-item {
  padding: 0.35rem 1rem;
  cursor: pointer;
  width: calc(100% - 2rem);
}
.admin_sidebar__menu-item--active {
  background-color: var(--c-admin_sidebar-menu_item-bg--active);
}
.admin_sidebar__menu-item:hover {
  background-color: var(--c-admin_sidebar-menu_item-bg--hover);
}

.admin_sidebar__menu-item__icon {
  display: inline;
  margin-right: 0.5rem;
}

/* =============================
 * SIDEBAR LANGUAGE SELECTOR
 * ============================= */
.admin_sidebar__language_selector {
  width: calc(100% - 2rem);
  margin: 0.5rem 1rem;
}
.admin_sidebar__language_selector > select {
  width: 100%;
}

/* ========================
 * DATA TABLES
 * ======================== */
.admin_data_table:not(.admin_data_table--dense) {
  --admin-data-table-spacing: 0.35rem;
  font-size: 0.8rem;
}
.admin_data_table--dense {
  --admin-data-table-spacing: 0.2rem;
  font-size: 0.7rem;
}

.admin_data_table a {
  color: var(--c-clickable);
}
.admin_data_table a:hover {
  color: var(--c-clickable--hover);
}

.admin_data_table__row {
  --flex-basis: 10%;
  padding: var(--admin-data-table-spacing);
  display: flex;
  justify-content: space-between;
}
.admin_data_table__row > * {
  flex-basis: var(--flex-basis);
}
.admin_data_table__row:not(:last-child) {
  border-bottom: 1px solid var(--c-border);
}

.admin_data_table__row > *:not(:last-child) {
  margin-right: 1rem;
}

/* HEADER */
.admin_data_table__header_bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--admin-data-table-spacing);
}

/* (search bar) */
.admin_data_table__search_bar {
  display: flex;
}

.admin_data_table__search_bar__input {
  height: 22px;
  position: relative;
}
.admin_data_table__search_bar__input > input {
  height: 100%;
}
.admin_data_table__search_bar__input > button {
  width: 20px;
  height: 20px;
  padding: 0 !important;
  position: absolute;
  right: 2px;
  top: 2px;
}

.admin_data_table__search_bar > button {
  height: 24px;
  width: 24px;
  padding: 0 !important;
  color: var(--c-clickable);
}
.admin_data_table__search_bar > button:hover {
  color: var(--c-clickable--hover);
}

.admin_data_table__label--fixed {
  flex-grow: 1;
  width: 30vw;
}
.admin_data_table__label--small {
  font-size: 0.7rem;
}
.admin_data_table__label--discrete {
  color: var(--c-text--discrete);
}

/* =============================
 * FILE EDITOR
 * ============================= */
.admin__content--edit {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

/*  (> phone) */
@media only screen and (max-width: 480px) {
  #admin_categories_editor,
  #admin_tags_editor,
  #admin_authors_editor {
    width: 100%;
  }
}
/*  (> tablet + desktop) */
@media only screen and (min-width: 481px) {
  #admin_metadata_content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  #admin_categories_editor,
  #admin_tags_editor,
  #admin_authors_editor {
    max-width: 320px;
    flex-grow: 1;
  }
}

#admin-tags-list {
  margin-bottom: 0.5rem;
}

.admin_authors_editor__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.admin_categories_editor__header {
  text-transform: uppercase;
  font-size: 0.85em;
  justify-self: center;
}

.admin_file_editors__header__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin_file_editors__header__editor_options {
  border: 1px solid var(--c-border);
  border-radius: 0.25rem;
  padding: 0.25rem;
  margin: 0.5rem 0;
  font-size: 0.85rem;
  justify-content: space-between;
}

.admin_file_editors__content {
  width: 100%;
  min-height: 320px;
  margin-bottom: 0.5rem;
}

.admin_file_editors__content--horizontal,
.admin_file_editors__content--vertical {
  display: flex;
}

.admin_file_editors__content--vertical {
  flex-direction: column;
}

.admin_file_editors__content--vertical .admin_file_editor {
  width: 100% !important;
}

.admin_file_editor__error {
  background-color: var(--c-bg--red);
  border: 1px solid var(--c-text--red);
  color: var(--c-text--red);
  padding: 1rem;
  border-radius: 3px;
  font-weight: bold;
}
.admin_file_editor__error a {
  font-weight: normal;
  text-decoration: underline;
}

.admin_file_editor {
  flex-grow: 1;
  border: 1px solid var(--c-border);
  border-radius: 0.25rem;
  display: grid;
  grid-template-rows: auto 1fr;
  width: var(--w-editor);
}
.admin_file_editors__content--tabs .admin_file_editor {
  display: none;
}

.admin_file_editor--script {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.admin_file_editor__header {
  padding: 0.25rem;
  border-bottom: 1px solid var(--c-border);
  justify-content: space-between;
  height: 24px;
}
.admin_file_editor__header__filepath {
  margin-right: 0.5rem;
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--c-text--light);
}

.admin_file_editor__content {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.admin_file_editors__content:not(.admin_file_editors__content--tabs) .admin_file_editor {
  max-height: 600px;
}
.admin_file_editors__content.admin_file_editors__content--tabs .admin_file_editor {
  height: 100%;
}

.admin_file_editor__header--script {
  display: flex;
  align-items: center;
}
.admin_file_editor__content--script {
  border: none;
  width: calc(100% - 0.5rem);
  height: calc(100% - 0.5rem);
  background-color: var(--c-file-editor-bg--script);
  color: var(--c-file-editor-text--script);
  padding: 0.25rem;
  margin: 0;
  font-family: monospace;
  border-radius: 0 0 0.25rem 0.25rem;
  resize: none;
  min-height: 300px;
  outline: none;
  position: relative;
}
.admin_file_editor__content--script textarea,
.admin_file_editor__content--script pre,
.admin_file_editor__content--script code {
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: pre-wrap;
}
.admin_file_editor__content--script textarea,
.admin_file_editor__content--script pre {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* white-space: pre; */
  overflow: auto;
}
.admin_file_editor__content--script textarea {
  z-index: 1;
  color: transparent;
  background: transparent;
  caret-color: white;
  resize: none;
  border: 0;
  padding: 0;
}
.admin_file_editor__content--script textarea:focus {
  outline: none;
}
.admin_file_editor__content--script pre {
  z-index: 0;
  padding: 0;
  border: 0;
  margin: 0;
}
.admin_file_editor__content--script code {
  background: transparent;
  padding: 0;
}

.admin_file_editor__content--preview {
  height: 100%;
  border: none;
  padding: 0;
  min-height: 300px;
}

div.admin_file_editor__content--preview {
  padding: 1rem;
  overflow-y: auto;
  width: calc(100% - 2rem);
}
iframe.admin_file_editor__content--preview {
  width: 100%;
}

.admin_file_editors__tabs-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 70vh;
}

.admin_file_editors__tabs {
  display: flex;
  margin-left: 1rem;
}

.admin_file_editors__tab {
  text-transform: uppercase;
  color: var(--c-text--light);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--c-border);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  opacity: 0.5;
  user-select: none;
  cursor: pointer;
}
:not(.admin_file_editors__tab--active).admin_file_editors__tab:hover {
  opacity: 0.75;
}
.admin_file_editors__tab--active {
  opacity: 1;
}

/* =============================
 * MEDIA
 * ============================= */
.admin_media_list {
  --w-media-sidebar: 16vw;
  display: grid;
  grid-template-columns: 1fr var(--w-media-sidebar);
  height: 100%;
  word-break: break-word;
}
.admin_media_list--full {
  width: calc(100vw - var(--w-sidebar) - 2rem);
}

#admin_media_sidebar {
  margin-left: 1rem;
  border-left: 1px solid var(--c-border);
  padding-left: 1rem;
}
#admin_media_sidebar-img {
  width: calc(var(--w-media-sidebar) - 2rem);
  height: auto;
}

/* =============================
 * SETTINGS
 * ============================= */
.admin_settings_block {
  border: 1px solid var(--c-border);
  border-radius: 0.25rem;
  user-select: none;
}
.admin_settings_block:not(.closed) {
  padding: 0.25rem 1rem 1rem 1rem;
}
.admin_settings_block.closed {
  padding: 0.25rem 1rem;
}
.admin_settings_block:not(:last-child) {
  margin-bottom: 1rem;
}

.admin_settings_block.closed .admin_settings_block__content {
  display: none;
}

/* =============================
 * MODAL
 * ============================= */
.admin-modal__label {
  margin-right: 1rem;
}