@use '../../../styles';
@use '../../../themes/defaults';

div.jse-collapsed-items {
  margin-left: calc(var(--level) * defaults.$indent-size);
  $transparent-color: transparent;
  $background-color: defaults.$collapsed-items-background-color;
  $color: defaults.$collapsed-items-link-color;

  font-family: defaults.$font-family;
  font-size: defaults.$font-size;
  color: $color;

  // https://sharkcoder.com/visual/borders
  $size: 8px;
  padding: styles.$padding-half;
  border: $size solid transparent;
  border-width: $size 0;
  background-color: defaults.$contents-background-color;
  background-image:
    linear-gradient($background-color, $background-color),
    linear-gradient(to bottom right, $transparent-color 50.5%, $background-color 50.5%),
    linear-gradient(to bottom left, $transparent-color 50.5%, $background-color 50.5%),
    linear-gradient(to top right, $transparent-color 50.5%, $background-color 50.5%),
    linear-gradient(to top left, $transparent-color 50.5%, $background-color 50.5%);
  background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x;
  background-position:
    0 0,
    $size 0,
    $size 0,
    $size 100%,
    $size 100%;
  background-size:
    auto auto,
    2 * $size 2 * $size,
    2 * $size 2 * $size,
    2 * $size 2 * $size,
    2 * $size 2 * $size;
  background-clip: padding-box, border-box, border-box, border-box, border-box;
  background-origin: padding-box, border-box, border-box, border-box, border-box;

  display: flex;

  &.jse-selected {
    background-color: defaults.$selection-background-color;
    --jse-collapsed-items-background-color: #{defaults.$collapsed-items-selected-background-color};
  }

  div.jse-text,
  button.jse-expand-items {
    margin: 0 styles.$padding-half;
  }

  div.jse-text {
    display: inline;
  }

  button.jse-expand-items {
    font-family: inherit;
    font-size: inherit;
    color: $color;

    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;

    &:hover,
    &:focus {
      color: defaults.$collapsed-items-link-color-highlight;
    }
  }
}