// https://www.w3schools.com/css/css_dropdowns.asp
// https://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack

.aesthetic-windows-95-dropdown {
  position: relative;
  display: inline-block;

  &:focus-within .aesthetic-windows-95-dropdown-menu {
    // Fixes a11y on every browser except chrome
    display: block;
  }

  .aesthetic-windows-95-dropdown-trigger {
    @include no-button-styles;
    padding: 1px 4px;
  }

  .aesthetic-windows-95-dropdown-trigger:focus {
    @include windows-95-focus-outline;

    background-color: $aesthetic-windows-95-blue;
    color: $aesthetic-windows-95-white;
  }

  .aesthetic-windows-95-dropdown-menu.is-active {
    display: block
  }

  .aesthetic-windows-95-dropdown-menu {

    @include windows-95-hover-over;

    display: none;
    position: absolute;
    margin: 0;
    list-style-type: none;

    background-color: $aesthetic-windows-95-grey;

    min-width: 150px;
    padding: 4px;
    z-index: 1;

    &:hover, &:focus, &:focus-within {
      display: block
    }

    hr {
      border-color: $aesthetic-windows-95-divider;
    }

    .aesthetic-windows-95-dropdown-menu-item {
      padding-top: 1px;
      padding-bottom: 1px;
      padding-left: 10px;
      cursor: pointer;

      button {
        @include no-button-styles;
      }

      &:hover, &:focus, &:focus-within {

        @include windows-95-focus-outline;

        background-color: $aesthetic-windows-95-blue;
        color: $aesthetic-windows-95-white;
      }
    }
  }
}

.aesthetic-windows-xp-dropdown {
  position: relative;
  display: inline-block;

  &:focus-within .aesthetic-windows-xp-dropdown-menu {
    // Fixes a11y on every browser except chrome
    display: block;
  }

  .aesthetic-windows-xp-dropdown-trigger {
    @include no-button-styles;
    padding: 1px 4px;
  }

  .aesthetic-windows-xp-dropdown-trigger:focus {
    @include windows-95-focus-outline;

    background-color: $aesthetic-windows-xp-blue;
    color: $aesthetic-windows-xp-white;
  }

  .aesthetic-windows-xp-dropdown-menu.is-active {
    display: block
  }

  .aesthetic-windows-xp-dropdown-menu {

    @include windows-xp-hover-over;

    // Has a slightly darked and moved box shadow
    box-shadow: 2px 2px 1px 0px $aesthetic-windows-xp-shadow-dark;

    display: none;
    position: absolute;
    margin: 0;
    list-style-type: none;

    background-color: $aesthetic-windows-xp-white;

    min-width: 150px;
    padding: 4px;
    z-index: 1;

    &:hover, &:focus, &:focus-within {
      display: block
    }

    hr {
      border-color: $aesthetic-windows-xp-divider;
    }

    .aesthetic-windows-xp-dropdown-menu-item {
      padding-top: 1px;
      padding-bottom: 1px;
      padding-left: 10px;
      cursor: pointer;

      button {
        @include no-button-styles;
      }

      &:hover, &:focus, &:focus-within {

        @include windows-xp-focus-outline;

        background-color: $aesthetic-windows-xp-blue;
        color: $aesthetic-windows-xp-white;
      }
    }
  }
}