@use 'apps/dashboard/src/variables' as *;

:host {
  background: $color-light-stronger;
  border: 1px solid $color-neutral-light;
  border-radius: rhythm(1);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: rhythm(1);
  opacity: 0;
  padding: rhythm(1);
  position: relative;
  transition:
    border $transition-hint,
    opacity $transition-process-in;
  width: rhythm(45);

  .title-s {
    align-items: center;
    display: flex;
    height: rhythm(4);
    justify-content: space-between;
    padding-left: rhythm(1);
  }
  .input {
    background: $color-light-stronger;
    border-radius: 50%;
    border: 1.5px solid $color-neutral-regular;
    flex-shrink: 0;
    height: rhythm(2);
    position: absolute;
    left: calc(#{rhythm(1)} * -1);
    top: calc(#{rhythm(2)} - 2px);
    width: rhythm(2);
  }

  @media (min-height: $height-viewport-medium-min) {
    &.is-root {
      margin-top: rhythm(17);
    }
  }

  &.visible {
    opacity: 1;
  }
  &.is-root {
    border: 1.5px solid $color-neutral-regular;
    margin-top: rhythm(8);
  }
  &:not(.is-root).default:hover {
    border: 1px solid $color-primary-regular;
    cursor: pointer;
  }
  &.selected {
    border: 2px solid $color-primary-regular;
  }
  &.processing {
    border: 2px solid $color-success-strong;
  }
  &.processed {
    border: 1px solid $color-success-strong;
  }
  &.unsaved {
    background: $color-secondary-lightest;
    border: 1px solid $color-secondary-strong;
  }

  &.processing .input,
  &.processed .input {
    border: 1.5px solid $color-success-strong;
  }
}
