@charset "UTF-8";
@use 'sass:color';
@use '@craftcms/sass/mixins';

$base: 24px;
$tabPadding: 14px;
$tabWidth: $base * 12;
$gridColor: var(--gray-100);

@mixin workspace-bg {
  background-color: var(--gray-050);
  background-image: linear-gradient(to right, $gridColor 1px, transparent 0),
    linear-gradient(to bottom, $gridColor 1px, transparent 1px);
  background-size: $base $base;
}

.layoutdesigner {
  container-type: inline-size;
}

.fld-container {
  display: flex;
  align-items: stretch;
  position: relative;
  @include mixins.input-styles;
  overflow: hidden;
  box-shadow: none;
  min-height: 500px;

  .errors > .layoutdesigner > & {
    border: 1px solid var(--fg-error) !important;
  }

  .fld-workspace {
    flex: 1;
    max-width: 100%;
    border-start-start-radius: calc(var(--radius-sm) - 1px);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: calc(var(--radius-sm) - 1px);
    padding-inline: $base 0;
    padding-block: $base;
    @include workspace-bg;
    background-position: -1px -1px;
    box-shadow: inset 0 1px 3px -1px color.adjust(mixins.$grey200, $lightness: -10%);

    .fld-tabs {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
    }
  }

  .fld-library {
    display: none;
  }
}

.fld-library-hud {
  width: $tabWidth - 1;
  max-width: 100%;

  .main {
    height: 100%;
    padding: $tabPadding;
  }
}

.fld-new-tab-btn:active {
  background-color: var(--gray-050);
}

.fld-library {
  display: flex;
  flex-direction: column;
  height: 100%;

  .btngroup {
    margin-block-end: $tabPadding;
  }

  .fld-field-library,
  .fld-ui-library {
    margin-block: -3px;
    margin-inline: #{-$tabPadding};
    padding-block: 3px;
    padding-inline: #{$tabPadding};
    flex: 1;
    min-height: 0;
    max-height: 550px;
    overflow: auto;
  }

  .fld-field-library {
    .fld-field-group {
      margin-block-start: $tabPadding;

      & > *:not(:first-child) {
        margin-block-start: var(--s);
      }
    }

    .fld-field-indicators {
      display: none;
    }
  }

  .fld-ui-library > *:not(:first-child) {
    margin-block-start: var(--s);
  }

  .filtered {
    display: none !important;
  }
}

.layoutdesigner .fld-library,
.fld-tab .tabs .tab,
.fld-tab .fld-tabcontent {
  background-color: var(--white);
  box-shadow:
    0 0 0 1px color.adjust(mixins.$grey900, $alpha: -0.9),
    0 2px 5px -2px color.adjust(mixins.$grey900, $alpha: -0.8);
}

.fld-new-tab-btn {
  background: var(--white) !important;
  box-shadow:
    0 0 0 1px #{color.adjust(mixins.$grey900, $alpha: -0.9)},
    0 2px 5px -2px #{color.adjust(mixins.$grey900, $alpha: -0.8)};
}

.fld-tab .settings::before,
.fld-element .settings::before {
  margin-block-start: -2px;
  font-size: 16px;
  opacity: 0.5;
}

.fld-tab .settings:hover::before,
.fld-tab .settings.active::before,
.fld-element .settings:hover::before,
.fld-element .settings.active::before {
  opacity: 1;
}

.fld-tab {
  width: $tabWidth + $base;
  max-width: 100%;
  padding-inline: 0 $base + 1;
  padding-block: 0 $base;
  box-sizing: border-box;

  .tabs {
    margin-block: -10px 0;
    margin-inline: -12px;
    padding-block: 10px 0;
    padding-inline: 12px;
    overflow: hidden;
    display: flex;

    .tab {
      display: flex;
      align-items: center;
      gap: var(--xs);
      max-width: calc(100% - 10px);
      box-sizing: border-box;
      padding-block: 8px;
      padding-inline: $tabPadding;
      border-radius: var(--radius-md) var(--radius-md) 0 0;

      body:not(.dragging) &.draggable {
        cursor: move;
        cursor: grab;
      }
    }
  }

  .fld-tab__name {
    margin-block: 0;
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fld-tabcontent {
    padding: $tabPadding;
    border-start-start-radius: 0;
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);

    & > .fld-element,
    & > .fld-add-btn {
      &:not(:first-child) {
        margin-block-start: var(--s);
      }
    }
  }

  &.fld-insertion {
    .tabs .tab,
    .fld-tabcontent {
      margin: -2px;
      border: 2px dashed var(--border-hairline);
      box-shadow: none;
      @include workspace-bg;
    }

    .tabs .tab {
      background-position: -1px -1px;
    }

    .fld-tabcontent {
      background-position: -1px -13px;
    }
  }
}

.fld-tab-caboose {
  min-height: 24px;
}

.fld-element {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--s);
  gap: var(--s);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--white);

  body:not(.dragging) & {
    cursor: move;
    cursor: grab;
  }

  &.fld-insertion {
    box-sizing: border-box;
    border: 2px dashed var(--border-hairline);
    border-radius: var(--radius-md);
    background: none;
    box-shadow: none;
  }

  &.draghelper {
    @include mixins.shadow;
  }

  &.fld-field {
    color: var(--fg-subtle);
    background-color: var(--gray-100);

    &:not(.draghelper, :focus) {
      box-shadow: none;
    }

    .field-name {
      display: flex;
      flex-direction: column;
      gap: var(--xs);
    }
  }

  .fld-element-icon {
    text-align: center;

    &,
    svg {
      width: 16px;
      height: 16px;
    }

    svg {
      @include mixins.svg-mask(var(--ui-control-color));
    }
  }

  .field-name {
    flex: 1;
    overflow: hidden;

    .fld-element-label,
    .fld-attribute {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--xs);
    }

    .fld-element-label h4,
    .fld-attribute .smalltext {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fld-element-label h4 {
      font-weight: normal;
      color: var(--text-color);
      margin: 0;
    }
  }
}

.fld-hr,
.fld-br {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;

  &::before {
    position: absolute;
    display: block;
    inset-block-start: calc(50% - 2px);
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    content: '';
    font-size: 0;
    border-radius: 2px;
  }

  .smalltext {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gray-100);
    border-radius: var(--radius-lg);
    padding-block: 0;
    padding-inline: var(--s);
    height: var(--touch-target-size);
  }
}

.fld-hr::before {
  background-color: var(--gray-100);
}

.fld-br::before {
  background-image: repeating-linear-gradient(
    to right,
    var(--gray-100),
    var(--gray-100) calc(100% / 19),
    transparent calc(100% / 19),
    transparent calc(100% / 9.5),
    var(--gray-100) calc(100% / 9.5)
  );
}

.fld-element-settings-body {
  flex: 1;
  margin-block: -24px 0;
  margin-inline: var(--neg-padding);
  padding-block: 24px;
  padding-inline: var(--padding);
  overflow: hidden auto;
  position: relative;

  hr {
    margin-inline: -24px;
  }
}

.fld-element-settings-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-block: 0 -24px;
  margin-inline: var(--neg-padding);
  padding-block: 5px;
  padding-inline: var(--padding);
  @include mixins.pane;
  background-color: var(--gray-050);
  z-index: 3;

  & > .ee-site-select {
    flex: 1;
  }

  & > .btn {
    margin-inline-start: 5px;
  }

  & > .spinner {
    margin-inline: 0 var(--neg-padding);
    margin-block: 0;
  }
}

// thumbnail management
.thumb-management {
  margin-block: var(--xl);

  .field:first-child {
    margin-inline-end: var(--xl);
  }
}

// card view designer
.card-view-designer {
  container: cvd / inline-size;
}

.cvd-container {
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  gap: var(--xl);
}

@container cvd (width > 37.5rem) {
  .cvd-container {
    grid-template-columns: 1fr 2fr;
  }
}

.cvd-library {
  .draggable {
    display: flex;
  }
}

.cvd-preview-container {
  padding: var(--xl);
  border: 1px solid #{color.adjust(mixins.$inputColor, $alpha: -0.75)} !important;
  border-radius: var(--radius-sm);
  display: grid;
  height: 100%;
  align-items: center;
}

.cvd-preview {
  &:not(.loading) .spinner {
    display: none;
  }
}

.cvd-thumbnail {
  --icon-size: 2rem;
  --icon-color: var(--gray-300);
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gray-150);
  border-radius: var(--radius-md);
}

.card-placeholder {
  display: inline-block;
  border: 1px dashed mixins.$grey300;
  border-radius: var(--radius-sm);
  padding-block: 0.1em;
  padding-inline: 0.5em;
}

.field.cvd-field {
  margin-block-start: 0.2em !important;
  margin-inline-start: 0.5em;
}
