@import "./menu.scss";

.components-modal__screen-overlay.presto-modal {
  z-index: 999999;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
  color: #fff;
}
.components-placeholder {
  .components-notice {
    margin-left: 0;
    margin-bottom: 15px;
  }
}

.presto-playlist__block-editor--video-list {
  padding: 15px 20px;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: scroll;
}

progress.presto-progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border: none;

  width: 100%;
  height: 3px;
  border-radius: 999px;
}
progress.presto-progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 9999px;
}
progress.presto-progress::-moz-progress-bar {
  background-color: #f3f3f3;
  border-radius: 9999px;
}
progress.presto-progress::-webkit-progress-value {
  background: var(--wp-admin-theme-color);
  transition: 2s width ease;
}

// let alignment be visible in admin
.editor-styles-wrapper [data-type="presto-player/reusable-display"] .wp-block {
  max-width: none;
  margin: 8px 0;
}

.components-card__body .presto-player__inner-tabs .components-tab-panel__tabs {
  margin: 0 -24px 20px -24px;
  border-bottom: 1px solid #dcdcdc;
}

.presto-player {
  &__placeholder-control {
    flex: 1 0 100%;
    margin: 10px 0;
    padding: 12px;
    background: #f3f3f3;

    .components-base-control,
    .components-base-control__field {
      margin-bottom: 0;
    }

    p.components-base-control__help {
      margin: 0;
    }
  }

  &__media-modal {
    .components-modal__content {
      display: flex;
      flex-direction: column;
    }

    // &-upload {
    //   display: flex;
    //   align-items: center;

    //   > * {
    //     margin-right: 10px;
    //   }
    // }

    &-content {
      grid-area: main;
      padding: 24px 24px 12px 24px;
      display: grid;
      overflow: hidden;

      .components-drop-zone__provider {
        overflow: hidden;
        display: grid;
      }

      .presto-player {
        &__media-not-found,
        &__media-loading {
          height: 100%;
          display: flex;
          justify-content: center;
          text-align: center;
        }

        &__media-list {
          display: grid;
          grid-template-rows: auto 1fr;
          overflow: hidden;

          h1,
          h2,
          h3,
          h4,
          h5 {
            margin-top: 0;
          }
        }
        &__media-list-items {
          border-radius: 3px;
          overflow: auto;
          border: 1px solid rgb(221, 221, 221);
        }

        &__media-list-item {
          background: #fff;
          display: grid;
          grid-template-columns: 50px 8fr 1fr 2fr;
          grid-template-rows: auto;
          margin-bottom: -1px;
          align-items: center;
          cursor: pointer;
          transition: background-color 0.35s ease, color 0.35s ease;

          &.is-selected,
          &:nth-child(even).is-selected {
            color: #fff;
            background: var(--wp-admin-theme-color);

            .presto-player__media-list-item-icon {
              color: #fff;
            }
          }

          > * {
            padding: 1em;
          }

          &:hover:not(.is-selected) {
            background: #f3f3f3;
          }
          &:nth-child(even) {
            background: #f9f9f9;
            &:hover:not(.is-selected) {
              background: #f3f3f3;
            }
          }

          &-icon {
            color: var(--wp-admin-theme-color);
          }

          &-title {
            font-size: 14px;
            font-weight: 500;
          }
        }
      }

      .components-drop-zone {
        z-index: 99;
      }
    }

    &-sidebar {
      display: none;
      grid-area: sidebar;
      padding: 0 16px;
      z-index: 75;
      background: #f3f3f3;
      border-left: 1px solid #ddd;
      overflow: auto;

      &-content {
        padding: 16px 0;
      }
    }

    &-header {
      grid-area: header;
      padding: 24px 24px 12px 24px;

      .components-notice {
        margin: 15px 0 0;
      }
    }
    &-footer {
      grid-area: footer;
      border-top: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 8px;
    }

    @media screen and (min-width: 780px) {
      &-sidebar {
        display: block;
      }
      &-layout {
        margin: -24px;
        display: grid;
        flex: 1;
        max-height: calc(100vh - 68px);
        grid-template-columns: 1fr 1fr minmax(0px, 267px);
        grid-template-rows: minmax(50px, auto) 1fr 60px;
        grid-template-areas:
          "header header sidebar"
          "main main sidebar"
          "footer footer footer";
        overflow: hidden;
      }
    }
  }

  &__media-modal-item {
    width: 200px;
    height: 200px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 3px solid transparent;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
    user-select: none;

    &.is-selected {
      border-color: var(--wp-admin-theme-color);
    }

    &:before {
      padding-top: 100%;
    }

    &-media-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 10px;
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
      background: #eee;
      margin-bottom: -1px;
    }

    &-title {
      text-align: center;
      font-weight: bold;
      padding: 10px;
      margin-top: auto;
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &__panel-grid-list {
    .components-button.block-editor-block-types-list__item {
      width: 50%;
    }
  }

  &__style-name input[type="text"] {
    padding: 3px 8px;
    font-size: 1.7em;
    line-height: 100%;
    height: 1.7em;
    width: 100%;
    outline: none;
    margin: 0 0 3px;
    background-color: #fff;
  }

  &__modal-modal-overlay,
  &__modal-overlay {
    z-index: 999999 !important;
  }

  &__modal-presets-overlay {
    z-index: 999999 !important;
  }

  &__modal-presets {
    width: 100%;
    height: 100%;
    max-width: calc(100% - 16px - 16px);
    max-height: calc(100% - 16px - 16px);

    .presto-player__style-sidebar {
      overflow: auto;
      width: 300px;
      padding-right: 2em;
      margin: 0 -1px 0 0;

      .components-tab-panel__tab-content {
        overflow: auto;
        height: calc(100% - 49px);
      }
      .components-panel__body {
        padding: 0;
        height: 100%;
        overflow: hidden;

        > div {
          height: 100%;
          overflow: hidden;
        }
      }
    }

    .presto-player__style-preview-panel {
      margin: 0px -1px;
      overflow: auto;
      background: #f3f3f3;
      height: 100%;
      border: 1px solid #e0e0e0;
      display: grid;
      margin: 0;
      place-items: center center;
      padding: 60px;
      position: relative;

      .components-disabled {
        width: 100%;
      }
    }

    .presto-player {
      &__wrapper {
        max-width: 600px;
        width: 100%;
        margin: auto;
      }
    }

    .components-modal__content {
      display: flex;
      flex-direction: column;
      > :nth-child(2) {
        display: contents;
      }
    }

    .components-tab-panel__tabs {
      border-bottom: 1px solid #dcdcdc;
    }
    .components-tab-panel__tab-content {
      width: 100%;
      padding: 16px;
    }

    .presto-player__preset-options {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .presto-player__style-preview-area {
      flex: 1 1 1px;
      overflow: hidden;

      .components-panel {
        height: 100%;
      }
    }
  }

  &__placeholder {
    .components-spinner {
      margin: auto;
    }
  }

  &__preset-options {
    .components-base-control {
      margin-bottom: 24px;
    }

    .components-notice {
      margin: 0;
    }
  }
}

.block-editor-block-styles {
  &__item {
    position: relative;
    &:hover {
      .block-editor-block-styles__item-edit {
        visibility: visible;
      }
    }
  }
  &__item-edit-icon {
    background: #333;
    border-radius: 999px;
    width: 24px;
    height: 24px;
    margin: 0 1px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__item-edit {
    z-index: 9;
    top: 0;
    right: 0;
    position: absolute;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    visibility: hidden;

    .dashicon {
      width: 16px;
      height: 16px;
      font-size: 16px;
    }

    // visibility: hidden;
  }
}

.presto-player__pro-badge {
  margin: 0 4px;
  line-height: 1;
  background: var(--wp-admin-theme-color);
  color: white;
  padding: 3px 6px;
  border-radius: 9999px;
  font-size: 10px;
  display: inline-block;
}

.ph-chapter {
  &.is-new {
    input {
      border: 1px dashed #999;
      &:disabled {
        background: #e3e3e3;
      }
    }
  }

  &__handle {
    cursor: move;
    opacity: 0.35;
  }
  &__remove {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  &:hover .ph-chapter__remove {
    visibility: visible;
    opacity: 1;
  }
}

svg.presto-block-icon {
  fill: none !important;
  stroke: currentColor !important;
}

svg.playlist-block-icon {
  color: inherit;
}

.block-editor-list-view-leaf.is-selected {
  svg.playlist-block-icon {
    color: #fff;
  }
  svg.presto-block-icon {
    stroke: #fff !important;
  }
}

.presto-link-placeholder-input {
  input {
    min-height: 36px;
  }
}

.wp-block-video {
  position: relative;
  .presto-player__search-bar {
    position: unset;
  }
}

.wp-block-presto-player-playlist-list {
  gap: 16px;
  display: flex;
  flex-direction: column;

  .block-list-appender.wp-block {
    position: unset;
    width: 100%;
  }
  .playlist__item-is--active {
    .block-editor-rich-text__editable {
      color: var(--playlist-highlight-text-color, #fff);
    }
  }
  .block-editor-rich-text__editable.block-editor-block-list__block {
    cursor: text;
    color: inherit;
  }
}

.wp-block-presto-player-playlist-preview {
  figure,
  [data-type="presto-player/reusable-display"] .wp-block {
    margin: 0;
  }
}