//  B U T T O N S

.__button-base {
  border: 1px solid;
  font-size: 1rem;
  letter-spacing: 0.025rem;
  position: relative;
  transition: all 0.2s;
}

.__button-basic {
  @extend .__button-base;
}

.__button-plain {
  @extend .__button-base;
  background-color: transparent;
  border-color: transparent;

  &::after {
    width: 100%; height: 2px;
    bottom: 2px; left: 0;

    content: "";
    display: block;
    transition: background-color 0.2s;
  }

  &:not(:hover)::after {
    background-color: transparent;
  }

  &:hover::after {
    background-color: $black;
  }
}

.__button-black {
  @extend .__button-base;
  @extend .__button-padding-vertical;
  @extend .__button-padding-horizontal;

  &:not(:hover) {
    background-color: $black;
    border-color: $white;
    box-shadow: 2px 2px 0 $white;
    color: $white;
  }

  &:hover {
    background-color: $white;
    border-color: $black;
    box-shadow: 2px 2px 0 $black;
    color: inherit;
  }
}

.__button-white {
  @extend .__button-base;
  @extend .__button-padding-vertical;
  @extend .__button-padding-horizontal;

  &:not(:hover) {
    background-color: $white;
    border-color: transparent;
    box-shadow: 2px 2px 0 $black;
    color: inherit;
  }

  &:hover {
    background-color: $black;
    border-color: $white;
    box-shadow: 2px 2px 0 $white;
    color: $white;
  }
}

.__button-gray {
  @extend .__button-base;
  @extend .__button-padding-vertical;
  @extend .__button-padding-horizontal;

  background-color: $white;

  &:not(:hover) {
    border-color: transparent;
    box-shadow: 2px 2px 0 $black;
  }

  &:hover {
    border-color: $teal;
    box-shadow: 2px 2px 0 $teal;
    color: $teal;
  }
}

.__button-padding-vertical {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.__button-padding-horizontal {
  padding-right: 1rem;
  padding-left: 1rem;
}



//  G R I D

.__grid {
  &:first-of-type {
    cursor: default;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
  }

  &:not(:first-of-type) {
    border-left: 1px solid $gray;

    .col {
      border-bottom-style: solid;
      border-bottom-width: 1px;

      &:last-of-type {
        border-right-style: solid;
        border-right-width: 1px;
      }

      &:not(.red):not(.orange):not(.yellow):not(.green) {
        border-color: $gray;
      }
    }
  }

  @media (min-width: 600px) {
    display: table;
    table-layout: fixed;
    width: 100%;

    .col {
      display: table-cell;
    }
  }
}

.col {
  padding: 0.5rem 1rem;
  width: 100%;

  &:not(:first-of-type) {
    text-align: right;
  }
}

// Padded columns
.grid-padded {
  @media (min-width: 600px) {
    margin-right: -1rem;
    margin-left: -1rem;

    .grid {
      border-spacing: 1rem 0;
    }
  }
}

// Vertically center grid content
// Requires content within the column to be inline/inline-block
.grid-align-middle .col {
  vertical-align: middle;
}

.grid-reverse {
  direction: rtl;

  .col {
    direction: ltr;
  }
}