// http://filamentgroup.github.io/select-css/demo/
.aesthetic-windows-95-select {
  @include windows-95-push-in;

  position: relative;
  overflow: hidden;
  display: block;
  background-color: $aesthetic-windows-95-white;
  cursor: pointer;

  select {
    cursor: pointer;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
    display: inline;

    // Don't show rounded corners on background
    margin-left: -5px;
    width: calc(100% + 5px);

    &:focus, &:focus-within {

      @include windows-95-focus-outline;

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

  .aesthetic-windows-95-select-checkmark {

    position: absolute;
    top: 0px;
    right: 0px;
    width: 15px;
    height: 16px;

    background: linear-gradient(to bottom right, $aesthetic-windows-95-white 0%, $aesthetic-windows-95-grey 2%, $aesthetic-windows-95-grey 94%, $aesthetic-windows-95-black 100%);
    border-top: 2px solid $aesthetic-windows-95-grey-border;
    border-left: 2px solid $aesthetic-windows-95-grey-border;
    border-right: 1px solid $aesthetic-windows-95-black;
    border-bottom: 1px solid $aesthetic-windows-95-black;

    cursor: pointer;
    pointer-events: none;

    &:after {
      content: " ";
      width: 100px;
      height: 100px;
      z-index: 100;

      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 7px solid $aesthetic-windows-95-black;
      margin-top: -3px;

      position: absolute;
      top: 50%;
      right: 4px;
      z-index: 2;

      cursor: pointer;
    	pointer-events: none;
    }
  }
}

.aesthetic-windows-xp-select {

  border: 2px solid $aesthetic-windows-xp-light-blue;
  position: relative;
  overflow: hidden;
  display: block;

  background-color: $aesthetic-windows-95-white;
  cursor: pointer;

  select {
    cursor: pointer;
    padding-left: 8px;
    padding-top: 4px;
    padding-bottom: 3px;
    border: none;
    box-shadow: none;
    background: $aesthetic-windows-xp-white;
    background-image: none;
    -webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
    display: inline;

    // Don't show rounded corners on background
    margin-left: -5px;
    width: calc(102% + 5px);

    &:focus, &:focus-within {

      @include windows-xp-focus-outline;

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

  &:after {
    content: " ";
    width: 21px;
    height: 25px;

    position: absolute;
    top: 0px;
    right: 0px;

    background-color: $aesthetic-windows-xp-white;
    pointer-events: none;
  }

  .aesthetic-windows-xp-select-checkmark {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 14px;
    height: 16px;

    transform: rotate(180deg);
    background: linear-gradient(to top left, $aesthetic-windows-xp-white 0%, $aesthetic-windows-xp-light-select-blue 50%);
    border: 1px solid $aesthetic-windows-xp-light-blue;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    border-top-right-radius: 1px;

    cursor: pointer;
    pointer-events: none;

    z-index: 1;

    &:after {
      content: "^";
      font-family: sans-serif;
      color: $aesthetic-windows-xp-dark-select-blue;
      font-weight: bold;

      width: 100px;
      height: 100px;
      z-index: 100;

      width: 0;
      height: 0;
      border: none;

      position: absolute;
      top: 1px;
      left: 2px;

      cursor: pointer;
    	pointer-events: none;
    }
  }
}