/* Button: Filled 1
  ========================================================================== */
.btn--filled {
  @include btn;
  background: $btn-f1-bc1a-d;
  color: $text-white;
  border: 0;
  padding: 0.2rem;
  box-sizing: border-box;

  &:focus {
    background-color: $btn-f1-bc1a-f;
    border: 0;
    &::after {
      @include btn-focus(dashed, $btn-f1-bc1a-f);
    }
  }

  &:hover {
    background: $btn-f1-bc1b-h;
    border-color: $btn-f1-bc1b-h;
    &::after {
      content: none;
    }
  }

  &:active {
    background-color: $btn-f1-bc1a-p;
    &::after {
      @include btn-focus(solid, $btn-f1-bc1a-p);
    }
  }
}