.Button {
  align-items: center;
  -webkit-appearance: none;
  background: var(--color-white);
  border: 1px solid var(--Link-color);
  color: var(--Link-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fontSize-s);
  font-weight: bold;
  justify-content: center;
  padding: calc(var(--gap-s) - 1px) var(--gap-m);
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition-duration: var(--time-xs);
  transition-property: background-color, border-color, color;
  transition-timing-function: ease-in-out;
  user-select: none;
  vertical-align: middle;

  .is-submitting &.is-clicked {
    pointer-events: none;

    &:not(.Link) {
      &::before {
        background: rgb(255 255 255 / 70%);
        bottom: -1px;
        content: '';
        left: -1px;
        position: absolute;
        right: -1px;
        top: -1px;
      }

      &::after {
        .Icon;

        animation: spin var(--time-xl) infinite ease-in-out;
        color: var(--color-black);
        content: 'autorenew';
        left: calc(50% - var(--Icon-size) / 2);
        position: absolute;
        top: calc(50% - var(--Icon-size) / 2);
      }
    }
  }
}

.Button.is-focused {
  border-color: var(--Link-hoverColor);
  color: var(--Link-hoverColor);
  text-decoration: none;
}

.Button {
  &:hover {
    .Button.is-focused;
  }
}

button,
input[type='submit'] {
  &:extend(.Button all);
}

.Button.is-dominant {
  background: var(--Link-color);
  border-color: var(--Link-color);
  color: var(--color-white);

  &:hover,
  &:focus {
    background: var(--Link-hoverColor);
    border-color: var(--Link-hoverColor);
    color: var(--color-white);
  }
}

.Button.is-green {
  background: var(--color-green5);
  border-color: var(--color-green5);
  color: var(--color-white);

  &:hover,
  &:focus {
    background: var(--color-green6);
    border-color: var(--color-green6);
    color: var(--color-white);
  }
}

.Button.is-yellow {
  background: var(--color-yellow3);
  border-color: var(--color-yellow3);
  color: var(--color-black);

  &:hover,
  &:focus {
    background: var(--color-yellow3);
    border-color: var(--color-yellow5);
    color: var(--color-black);
  }
}
