// vf-tree

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */
 /* stylelint-disable */
@import 'vf-tree.variables.scss';

.vf-tree {
  display: flex;
  height: 100%;
}

.vf-tree__inner {
  background-color: #FFF;
  padding: 0;
  transition: translateX ease-in 200ms;
  width: 100%;
}

.vf-tree--collapsed {
  overflow: hidden;
}


.vf-tree__inner > .vf-tree__list > .vf-tree__item {
  border-bottom: 1px solid #000;
  &:last-of-type {
    border-bottom: 0;
  }
}

.vf-button.vf-tree__button {
  all: unset;
  cursor: pointer;
  margin-left: auto;


  svg {
    fill: $vf-tree-caret-color;
    width: 16px;
    transform-origin: center;
  transform: rotate(90deg);
  }

  &:hover,
  &:focus {
    all: unset;
    cursor: pointer;
    margin-left: auto;
    position: relative;
    z-index: 5150;

    svg {
      fill: ui-color(black) !important;

    transform-origin: center;
    transform: rotate(90deg);
    }
  }
  &:focus:focus-visible svg { 
    outline: -webkit-focus-ring-color auto 1px;
  }
}

.vf-tree__link {
  box-sizing: border-box;
  display: inline-flex;
  color: black;
  margin-bottom: 0;
  padding: 8px;
  position: relative;
  text-decoration: none;
  width: 100%;

  &:hover,
  &:focus {
    text-decoration: underline;
    z-index: 8000;
  }
}

.vf-tree__item--selected {
  background-color: #D1E3F6;

  & > .vf-tree__link {
    font-weight: 700;
    .vf-tree__button svg {
      fill: #000;
    }
  }



  .vf-tree__list {
    background-color: white;
    position: relative;
    z-index: 5150;
  }
}

.vf-tree__item--expanded {

  > .vf-tree__link .vf-tree__button,
  &:hover > .vf-tree__button {
    svg { transform: rotate(-90deg); }
  }
}

.vf-tree__list {
  margin: 0;
}


.vf-tree__list--additional {
  display: none;
  padding: 0 8px;

  .vf-tree__item {
    margin: 0 -8px;
    padding: 0 8px;
  }

  .vf-tree__link {
    padding-right: 0;
  }

  & & {
    margin: 0 -8px;
    padding: 0 16px;

    // .vf-tree__link {
    //   padding-right: 0;
    // }

    .vf-tree__item {
      margin: 0 -16px;
      padding: 0 16px;
    }
  }

  .vf-tree__item--expanded > &  {
    display: block;
  }
}