
@mixin wide-list-item
{
  @include plaintext-font();

       color: $lighter-color;
  background: $darker-color;

      border: 1px solid $darker-color;
      margin: { bottom: 0px; left: 0px; left: 0px; right: 0px; }
     padding: { right: 0px; }
      cursor: pointer;

  // no up/down scrolling, #filename-list has its own
  overflow-y: none;
  &::-webkit-scrollbar:vertical { width: 0px; }

  // individual left/right scrolling for looooooong filenames
  &::-webkit-scrollbar:horizontal { height: 0px; }
    max-width: 295px;
   overflow-x: auto;

  // See app/assets/javascripts/cyber-dojo_files.js function radioEntrySwitch()
  &[class~='selected'] {
    background-color: lighten($darker-color, 10%);
    cursor: default;
  }
  &:hover {
    background-color: lighten($darker-color,10%);
    border: 1px dashed lighten($darker-color,20%);
  }
}


@mixin wide-list-item
{
  @include plaintext-font();

       color: $lighter-color;
  background: $darker-color;

      border: 1px solid $darker-color;
      margin: { bottom: 0px; left: 0px; left: 0px; right: 0px; }
     padding: { right: 0px; }
      cursor: pointer;

  // no up/down scrolling, #filename-list has its own
  overflow-y: none;
  &::-webkit-scrollbar:vertical { width: 0px; }

  // individual left/right scrolling for looooooong filenames
  &::-webkit-scrollbar:horizontal { height: 0px; }
    max-width: 295px;
   overflow-x: auto;

  // See app/assets/javascripts/cyber-dojo_files.js function radioEntrySwitch()
  &[class~='selected'] {
    background-color: lighten($darker-color, 10%);
    cursor: default;
  }
  &:hover {
    border: 1px dotted lighten($darker-color,15%);
  }
}

Use only border CSS styling for filename :hover appearance
Use only border CSS styling for filename :hover appearance
