.gui-form {
  --mat-expansion-header-text-size: 0.75rem;
  --mat-expansion-header-collapsed-state-height: 2rem;
  --mat-expansion-header-expanded-state-height: 2rem;
  --mat-expansion-container-text-size: 0.75rem;
  --mat-expansion-container-shape: 0;

  position: relative;
  display: block;
  font-size: 0.75rem;

  .mat-expansion-panel:not([class*='mat-elevation-z']) {
    box-shadow: none;
  }

  .mat-expansion-panel-body {
    padding: 0;
  }

  .mat-expansion-panel-header {
    padding: 0 0.75rem;

    .mat-content {
      align-items: center;
      padding-right: 0.5rem;

      [dir='rtl'] & {
        padding-right: 0;
        padding-left: 0.5rem;
      }

      gui-field-label {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .mat-expansion-indicator {
    svg {
      width: 1.5rem;
      height: 1.5rem;
      margin: 0 -0.5rem;
    }

    &::after {
      vertical-align: 0.125rem;
    }
  }

  .mat-mdc-tab-header {
    --mat-tab-label-text-size: 0.75rem;
    --mat-tab-container-height: 1.5rem;
  }

  .mat-mdc-tab-header-pagination {
    min-width: var(--mat-tab-container-height);
  }

  .mat-mdc-tab {
    min-width: auto;
    padding: 0 0.75rem;
  }
}

.gui-list-item-heading {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0.75rem;
  line-height: 1.5rem;
  border-bottom: var(--mat-tab-divider-height, 1px) solid transparent;

  &::before {
    position: absolute;
    left: 0;
    width: 0.125rem;
    height: 1rem;
    background-color: var(--mat-expansion-header-text-color, var(--mat-sys-on-surface));
    content: '';

    [dir='rtl'] & {
      left: auto;
      right: 0;
    }
  }
}

.gui-list-item-title {
  display: flex;
  flex: 1;
  padding: 0;
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;

  .gui-list-item-active & {
    font-weight: bold;
  }
}

.gui-menu {
  .mat-mdc-tab-header {
    --mat-tab-active-indicator-shape: 0.25rem;

    padding: 0.25rem;
    background-color: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));

    .mdc-tab__ripple::before {
      border-radius: var(--mat-tab-active-indicator-shape);
    }
  }

  .mat-mdc-tab-labels {
    gap: 0.25rem;
  }

  .mdc-tab-indicator .mdc-tab-indicator__content {
    height: 100%;
    background-color: var(--mat-tab-active-indicator-color, var(--mat-sys-primary));
  }

  .mdc-tab-indicator--active .mdc-tab-indicator__content {
    opacity: 0.24;
  }
}
