/**
 * CourseStorm Blocks
 *
 * CSS for Backend only.
 */

/* Import fontello font directly in the editor styles */
@font-face {
  font-family: 'fontello';
  src: url('../assets/font/fontello.eot?64847097');
  src: url('../assets/font/fontello.eot?64847097#iefix') format('embedded-opentype'),
       url('../assets/font/fontello.woff2?64847097') format('woff2'),
       url('../assets/font/fontello.woff?64847097') format('woff'),
       url('../assets/font/fontello.ttf?64847097') format('truetype'),
       url('../assets/font/fontello.svg?64847097#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Base icon styles */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Define the specific icon codes */
.icon-calendar:before { content: '\e804'; }

.wp-block-coursestorm-classes-by-category {
  .coursestorm-classes-by-category-block-image {
    max-width: 100%;
  }
  // Add any editor-specific styles here

  .components-placeholder {
    min-height: 200px;
  }

  // Ensure the block is always expanded
  &.is-selected {
    .block-editor-block-list__block-edit {
      border: 1px solid #1e1e1e;
    }
  }
}

// Override WordPress core styles to prevent collapsing
.block-editor-block-list__block[data-type="coursestorm/classes-by-category"] {
  &.is-selected {
    .block-editor-block-list__block-edit {
      border: 1px solid #1e1e1e;
    }
  }

  // Force the block to always show its content
  .block-editor-block-list__block-edit {
    height: auto !important;
    overflow: visible !important;
  }

  // Hide the collapse button
  .block-editor-block-list__block-edit > [data-block] > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar > .components-toolbar > .components-button.block-editor-block-switcher__no-switcher-icon {
    display: none !important;
  }
}

/* Upcoming Classes Block Editor Styles */
.wp-block-coursestorm-upcoming-classes {
  // Add any editor-specific styles here

  .components-placeholder {
    min-height: 200px;
  }

  // Ensure the block is always expanded
  &.is-selected {
    .block-editor-block-list__block-edit {
      border: 1px solid #1e1e1e;
    }
  }
}

// Override WordPress core styles to prevent collapsing for upcoming classes block
.block-editor-block-list__block[data-type="coursestorm/upcoming-classes"] {
  &.is-selected {
    .block-editor-block-list__block-edit {
      border: 1px solid #1e1e1e;
    }
  }

  // Force the block to always show its content
  .block-editor-block-list__block-edit {
    height: auto !important;
    overflow: visible !important;
  }

  // Hide the collapse button
  .block-editor-block-list__block-edit > [data-block] > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar > .components-toolbar > .components-button.block-editor-block-switcher__no-switcher-icon {
    display: none !important;
  }
}

// Style for our custom class to force expansion
.coursestorm-always-expanded {
  &.block-editor-block-list__block {
    height: auto !important;
    min-height: 50px;
  }

  .block-editor-block-list__layout {
    display: block !important;
  }

  // Hide the collapse button
  .block-editor-block-list__block-edit > [data-block] > .block-editor-block-contextual-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon,
  .block-editor-block-list__block-edit > [data-block] > .block-editor-block-contextual-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon {
    display: none !important;
  }
}

/* Calendar icon styles for the block editor - matching front-end styling */
.block-editor-block-list__block .icon-calendar,
.block-editor .icon-calendar,
.editor-styles-wrapper .icon-calendar,
.block-editor-block-list__block .calendar-icon,
.block-editor .calendar-icon,
.editor-styles-wrapper .calendar-icon {
  float: left;
  font-size: 2rem;
  position: relative;
  margin-right: 15px;
  height: 32px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center !important;
}

.block-editor-block-list__block .coursestorm-calendar-date,
.block-editor .coursestorm-calendar-date,
.editor-styles-wrapper .coursestorm-calendar-date,
.block-editor-block-list__block .coursestorm-upcoming-classes-date,
.block-editor .coursestorm-upcoming-classes-date,
.editor-styles-wrapper .coursestorm-upcoming-classes-date {
  float: left;
  font-size: 2rem;
  position: relative;
  margin-right: 15px;
  height: 32px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center !important;
}

/* Icon font for calendar in editor */
.block-editor-block-list__block .icon-calendar:before,
.block-editor .icon-calendar:before,
.editor-styles-wrapper .icon-calendar:before,
.block-editor-block-list__block .coursestorm-calendar-date:before,
.block-editor .coursestorm-calendar-date:before,
.editor-styles-wrapper .coursestorm-calendar-date:before,
.block-editor-block-list__block .calendar-icon:before,
.block-editor .calendar-icon:before,
.editor-styles-wrapper .calendar-icon:before {
  font-family: "fontello" !important;
  content: '\e804' !important;
  font-size: 2em !important;
  margin: 0 !important;
  display: block !important;
  color: #000000 !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center !important;
}

/* Calendar date positioning in editor */
.block-editor-block-list__block .coursestorm-calendar-date .calendar,
.block-editor .coursestorm-calendar-date .calendar,
.editor-styles-wrapper .coursestorm-calendar-date .calendar,
.block-editor-block-list__block .calendar-icon .calendar,
.block-editor .calendar-icon .calendar,
.editor-styles-wrapper .calendar-icon .calendar {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  line-height: 1;
  text-align: center !important;
  width: 100% !important;
}

.block-editor-block-list__block .coursestorm-calendar-date .month,
.block-editor .coursestorm-calendar-date .month,
.editor-styles-wrapper .coursestorm-calendar-date .month,
.block-editor-block-list__block .calendar-icon .month,
.block-editor .calendar-icon .month,
.editor-styles-wrapper .calendar-icon .month {
  color: white;
  font-size: 0.35em;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  top: 1.4em;
  z-index: 1;
  text-align: center !important;
  width: 100% !important;
}

.block-editor-block-list__block .coursestorm-calendar-date .day,
.block-editor .coursestorm-calendar-date .day,
.editor-styles-wrapper .coursestorm-calendar-date .day,
.block-editor-block-list__block .calendar-icon .day,
.block-editor .calendar-icon .day,
.editor-styles-wrapper .calendar-icon .day {
  font-size: 0.8em;
  position: absolute;
  top: 1.1em;
  text-align: center !important;
  width: 100% !important;
}

/* Widget content formatting to match front-end */
.block-editor-block-list__block .coursestorm-classes-by-category-widget-content,
.block-editor .coursestorm-classes-by-category-widget-content,
.editor-styles-wrapper .coursestorm-classes-by-category-widget-content {
  box-sizing: border-box;
  float: left;
  max-width: 70%;
  padding-left: 15px;
  width: 100%;
}

.block-editor-block-list__block .coursestorm-classes-by-category-widget-content.no-date,
.block-editor .coursestorm-classes-by-category-widget-content.no-date,
.editor-styles-wrapper .coursestorm-classes-by-category-widget-content.no-date {
  max-width: 100%;
}

/* Block controls styling */
.coursestorm-block-controls {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  background-color: #f8f9f9;
  border-radius: 4px;
}

.coursestorm-block-control {
  margin-bottom: 12px;
}

.coursestorm-block-control:last-child {
  margin-bottom: 0;
}

.coursestorm-block-control .components-base-control__label {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.coursestorm-block-control .components-select-control__input {
  width: 100%;
  max-width: 400px;
}

/* New Panel-based category selection styling */
.coursestorm-block-editor-wrapper {
  width: 100%;
}

.coursestorm-block-panel {
  margin-bottom: 24px;
  border: 2px solid #007cba;
  border-radius: 4px;
}

.coursestorm-block-panel .components-panel__body-title {
  background-color: #f0f6fc;
}

.coursestorm-block-panel .components-panel__body-toggle.components-button {
  font-weight: 600;
  font-size: 14px;
}

.coursestorm-block-panel .components-panel__row {
  display: block;
  margin-top: 12px;
}

.coursestorm-block-panel .components-base-control__label {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.coursestorm-block-panel .components-select-control__input {
  width: 100%;
}

.coursestorm-block-preview {
  margin-top: 16px;
}

/* Featured Classes Block Editor Styles */
.wp-block-coursestorm-featured-classes {
  .components-placeholder {
    min-height: 200px;

    .coursestorm-featured-classes-settings {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;

      .components-base-control {
        margin-bottom: 16px;
      }
    }
  }

  /* Widget area card styling */
  .components-card {
    margin-bottom: 16px;

    .components-card__header {
      background-color: #f0f6fc;
      border-bottom: 1px solid #ddd;
    }

    .components-card__body {
      padding: 16px;
    }

    .coursestorm-widget-preview {
      margin-top: 8px;

      ul {
        margin: 0;
        padding-left: 20px;
      }

      h2 {
        margin-top: 0;
        font-size: 1.2em;
      }
    }
  }
}