.designer {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  overflow: hidden;
}

.side {
  overflow: auto;
  padding: 0.5rem;
}

.main {
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
}

.menu {
  width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  .item {
    display: flex;
    padding: 0.5rem;
    gap: 0.5rem;
    cursor: pointer;
    border-radius: var(--ax-theme-nav-menu-item-radius, 1rem);
  }
  .item:hover {
    color: var(--ax-theme-nav-menu-item-hover-color, var(--bs-body-color));
    background-color: var(
      --ax-theme-nav-menu-item-hover-bg,
      var(--bs-tertiary-bg)
    );
  }
  .item:active,
  .item.active {
    color: var(--ax-theme-nav-menu-item-active-color, var(--bs-body-color));
    background-color: var(
      --ax-theme-nav-menu-item-active-bg,
      var(--bs-primary-bg-subtle)
    );
  }
}

.panel {
  .header {
    .title {
      font-weight: 600;
    }
  }
  .body {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.375rem;
  }

  .property {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 1rem;

    .title,
    .value {
      display: flex;
    }

    .value {
      gap: 0.375rem;
    }
    
    input:disabled,
    .colorInput.readonly {
      border-color: transparent !important;
      background: var(--bs-body-bg);
    }

    input[type="color"] {
      padding: 0.25rem;
      outline: none;
    }
  }
}

.palette {
  gap: 0.5rem;
}

.colorInputIcon {
  height: 1.25rem;
  width: 1.25rem;
  .colorInput:not(.readonly) & {
    cursor: pointer;
  }
}

.select {
  width: 100%;
}
