@import '../../../styles';

div.jse-collapsed-items {
  $transparent-color: transparent;
  $background-color: var(--jse-collapsed-items-background-color);
  $color: var(--jse-collapsed-items-link-color);

  font-family: var(--jse-font-family);
  font-size: var(--jse-font-size);
  color: $color;

  // https://sharkcoder.com/visual/borders
  $size: 8px;
  padding: $padding-half;
  border: $size solid transparent;
  border-width: $size 0;
  background-color: $transparent-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;

  div.jse-text,
  button.jse-expand-items {
    margin: 0 $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: var(--jse-collapsed-items-link-color-highlight);
    }
  }
}