// Google Fonts
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

// Challenge Styles
*,
*:before,
*:after {
  box-sizing: border-box;
}

$measurement: 0.125em;

.multi-button {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  button {
    background: white;
    border: $measurement solid black;
    cursor: pointer;
    font: 600 1.5rem/1.25 'Montserrat', sans-serif;
    letter-spacing: $measurement;
    margin: 0.5rem;
    padding: 0.5em 0.75em;
    position: relative;
    text-transform: uppercase;
    &:before,
    &:after {
      content: '';
      position: absolute;
      transition: all 0.125s ease-in-out;
    }
    &.cut {
      background: none;
      border-color: transparent;
      &:before,
      &:after {
        transition: all 0.175s ease-in-out;
      }
      &:before {
        background: black;
        border: 0px dashed black;
        left: $measurement * -1;
        top: $measurement * -1;
        right: $measurement * -1;
        bottom: $measurement * -1;
        z-index: -1;
      }
      &:hover:before,
      &:focus:before {
        background: white;
        border-width: $measurement;
      }
      &:after {
        background: white;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: -1;
      }
    }
    &.copy {
      &:after {
        border: $measurement dashed black;
        bottom: $measurement * -1;
        left: $measurement * -1;
        right: $measurement * -1;
        top: $measurement * -1;
        z-index: -1;
      }
      &:hover:after,
      &:focus:after {
        bottom: $measurement * -3;
        left: $measurement;
        right: $measurement * -3;
        top: $measurement;
      }
    }
    &.paste {
      &:after {
        border: $measurement dashed black;
        bottom: $measurement * -1;
        left: $measurement * -1;
        right: $measurement * -1;
        top: $measurement * -1;
      }
      &:hover:after,
      &:focus:after {
        bottom: $measurement;
        left: $measurement;
        right: $measurement;
        top: $measurement;
      }
    }
  }
}