@use '@scss-placeholders/util';
@use '@scss-variables/animation';

.Root {
  position: relative;
  border-bottom: 1px solid var(--theme-color-bg-1);
}

.Header {
  padding: 10px 12px;
  border: 0px solid transparent;
  border-left-width: 4px;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  &--is-theme-visual {
    border-left-color: var(--theme-color-node-visual-2);
  }

  &--is-theme-logic {
    border-left-color: var(--theme-color-node-logic-2);
  }

  &--is-theme-data {
    border-left-color: var(--theme-color-node-data-2);
  }

  &--is-theme-component {
    border-left-color: var(--theme-color-node-component-2);
  }

  &--is-theme-javascript {
    border-left-color: var(--theme-color-node-custom-2);
  }

  .Root--is-highlighted & {
    background-color: var(--theme-color-bg-3);
  }
}

.Title {
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 2%;
  padding: 0;
  padding-bottom: 1px;
  margin: 0;
  color: var(--theme-color-fg-highlight);
  font-weight: 600;
}

.Description {
  padding: 0;
  margin: 0;
  color: var(--theme-color-fg-default);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  opacity: 0.65;
}

.Arrow {
  width: 16px;
  height: 16px;
  position: absolute;
  pointer-events: none;
  right: 10px;
  top: 50%;
  transition: transform 300ms animation.$easing-equal;
  opacity: 0.65;

  &--is-collapsed {
    transform: translateY(-50%) rotate(90deg);
  }

  &--is-not-collapsed {
    transform: translateY(-50%) rotate(-90deg);
  }
}
