.button {
  @include border(palette(gray, light));
  
  background-color: palette(white);
  color: palette(gray, dark);
  cursor: pointer;
  font: {
    family: $sans-serif;
    size: .85rem;
    weight: 500;
  }
  padding: {
    bottom: 3px;
    left: 6px;
    right: 6px;
    top: 3px;
  }
  transition: background-color $transition, border-color $transition, color $transition;

  &:focus {
    outline: 0;
  }

  &:hover {
    color: palette(black);
  }

  &.primary {
    background-color: palette(orange);
    border-color: palette(orange, dark);
    color: palette(white);

    &:hover {
      border-color: palette(orange, x-dark);
    }
  }

  &.large {
    box-shadow: $box-shadow;
    padding: {
      bottom: 9px;
      right: 11px;
      left: 11px;
      top: 9px;
    }
    font: {
      family: $sans-serif;
      size: 1rem;
      weight: 700;
    }
    min-width: 8rem;
  }
}

.dark .button {
  background-color: palette(dark);
  border-color: palette(dark, light);
  color: palette(white);

  &.primary {
    background-color: palette(blue);
    border-color: palette(blue, dark);

    &:hover {
      border-color: palette(blue, x-dark);
    }
  }
}

.button-icon {
  height: 27px;
  width: 27px;
  background: {
    color: transparent;
    size: cover;
    repeat: no-repeat;
  }
  border: {
    color: palette(gray, light);
    radius: $border-radius;
    style: solid;
    width: 1px;
  }
  cursor: pointer;
  margin: {
    left: .25rem;
  }
  transition: background-image $transition;

  &.user {
    background-image: url("../assets/light/profile.svg");
  }

  &.share {
    background-image: url("../assets/light/share.svg");
  }

  &.theme {
    background-image: url("../assets/light/theme.svg");
  }

  &:focus {
    outline: 0;
  }
}

.dark .button-icon {
  background-color: transparent;
  border-color: palette(dark, light);
  transition: background $transition, border-color $transition;
  
  &.user {
    background-image: url("../assets/dark/profile.svg");
  }

  &.share {
    background-image: url("../assets/dark/share.svg");
  }

  &.theme {
    background-image: url("../assets/dark/theme.svg");
  }
}
