padraigfl/packard-belle

@import './var/colors';
@import './functions/box-shadows';
@import './var/uris';

$start: 'data:image/gif;base64,R0lGODlhNAATAKIAAAAAAP///wAA/wD/AP//AP8AAP///wAAACH5BAEAAAYALAAAAAA0ABMAAAOPaLrc/jDKSaudIIPLu95dKH2fGIKLVmSDxpTms83qCgwtmik7j46/BglQsOF6BuQrCFEuCkLiJ5diJnswl6sB7dqGSpjPscNaFcWiRpAhbKPVqhbkVAiiAjaA4LYizWOADneEenltfXFXioCCD3mHAHptYW9jV3OKL1FgZzEySZiVnp8yYkKlFyRNqa2uEgkAOw==';

@mixin button {
  border: 0px solid transparent;
  background-color: $grey;
  position: relative;
  user-select: none;

  &:disabled, &.disabled {
    pointer-events: none;
  }

  &:active, &:focus, &:active:focus, &.active, &.clicked {
    outline: none;
    color: inherit;
  }

  &:before {
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }
}

@mixin button-form {
  min-width: 48px;
  outline-width: 1px;
  outline-offset: -5px;
  padding: 5px 1px;
  box-shadow: dualShadow(white, $black), dualShadow($grey, $darkgrey, 2);

  &:focus {
    outline: black;
    outline-style: dotted;
    outline-width: 1px;
    box-shadow: dualShadow($black, $black), dualShadow(white, $black, 2);
  }

  &:active:focus, &:active, &.active, &.clicked{
    padding: 6px 0px 4px 2px;
    box-shadow: dualShadow($black, $black), dualShadow($darkgrey, $darkgrey, 2);
  }
}

@mixin button-large-icon {
  padding: 2px;
  width: 48px;
  min-width: 48px;
  img {
    display: block;
    margin: 0 auto;
    filter: grayscale(1);
    height: 20px;
    max-width: 20px;
  }
  &:disabled, &.disabled {
    color: $darkgrey;
    &:hover {
      img {
        filter: grayscale(1);
      }
      box-shadow: none;
    }
  }
  &:hover {
    img {
      filter: grayscale(0);
    }
    box-shadow: dualShadow(white, $black);
  }
  &:active:focus {
    box-shadow: dualShadow($black, white);
    padding: 3px 1px 1px 3px;
  }
}

@mixin button-small-icon {
  height: 22px;
  width: 22px;
  padding: 0px;

  img {
    margin: 3px;
    max-height: 16px;
    max-width: 16px;
  }

  &:hover {
    box-shadow: dualShadow(white, $darkgrey);
  }
  &:hover:focus:active, &:hover:active, &.active, &.clicked {
    box-shadow: dualShadow($darkgrey, white);
    img {
      margin: 4px 2px 2px 4px;
    }
  }
  &.btn--disabled {
    img {
      filter: grayscale(1);
    }
  }
}

@mixin button-nav {
  padding: 0px;
  min-width: initial;
  width: 16px;
  height: 14px;
  margin-left: 1px;
  margin-top: 1px;
  margin-bottom: 2px;
  image-rendering: pixelated;
  box-shadow: dualShadow(white, $black), dualShadow($grey, $darkgrey, 2);

  img {
    height: 14px;
    width: 14px;
  }

  &:focus {
    outline: none;
    border: none;
  }

  &:active:focus, &.clicked {
    padding-top: 2px;
    padding-bottom: 1px;
    padding-left: 4px;
    padding-right: 8px;
    box-shadow: dualShadow($black, white), dualShadow($darkgrey, $grey, 2);
  }
  &.window__close {
    margin-left: 2px;
  }
}

@mixin button-program {
  flex: 1;
  margin: 0px 1px;
  height: 22px;
  max-width: 140px;
  min-width: 40px;
  display: inline-block;
  width: 100%;
  padding-top: 2px;
  padding-left: 22px;
  padding-right: 3px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 4px 4px;
  box-shadow: dualShadow(white, $black), dualShadow($grey, $darkgrey, 2);

  &:active:focus, &.btn--active, &.clicked {
    background-position: 5px 5px;
    box-shadow: dualShadow($black, white), dualShadow($darkgrey, $grey, 2);
    padding-top: 3px;
    padding-left: 23px;
    padding-right: 2px;

    &:before {
      content: '';
      background-size: 2px;
      z-index: -1;
      box-shadow: none;
    }
  }

  &.btn--active {
    background-color: transparent;
    font-weight: bold;

    &:before {
      content: '';
      background-color: white;
      background-image: url($grey-checkered);
    }
  }
}

@mixin button-start {
  height: 22px;
  display: flex;
  align-content: center;
  width: 54px;
  padding-right: 6px;
  background-image: url($start);
  background-size: auto 18px;
  background-repeat: no-repeat;
  background-position: 2px 1px;
  box-shadow: dualShadow(white, $black), dualShadow($grey, $darkgrey, 2);

  &__text {
    font-size: 1rem;
    font-weight: bold;
  }

  &:active, &:focus, &:active:focus, &.active, &.clicked {
    box-shadow: dualShadow($black, white),
      shadow($black, 0, 1), dualShadow($darkgrey, $grey, 2),
      0px -1px 0px $black;
    background-position: 3px 2px;
    outline: 1px dotted black;
    outline-offset: -4px;
  }
}