/* Base style */
.ibk-button {
  border: none;
  outline: none;
  appearance: none;
  background-color: transparent;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 30px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--fast), border-color var(--fast);
}

.ibk-button * { box-sizing: border-box; }

.ibk-button:active {
  transform: translateY(1px);
}

.ibk-button__text {
  font-weight: 500;
  font-family: var(--fontGeometria);
  transition: color var(--fast);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Appearance modifiers */
.ibk-button--primary { color: white; }
.ibk-button--primary.ibk-button--green { background-color: var(--primaryGreen1); }
.ibk-button--primary.ibk-button--green:hover { background-color: var(--primaryGreen2); }
.ibk-button--primary.ibk-button--blue { background-color: var(--secondaryBlue1); }
.ibk-button--primary.ibk-button--blue:hover { background-color: var(--secondaryBlue2); }

.ibk-button--secondary.ibk-button--green {
  border-color: var(--primaryGreen1);
  color: var(--primaryGreen1);
}
.ibk-button--secondary.ibk-button--green:hover {
  border-color: var(--primaryGreen2);
  color: var(--primaryGreen2);
}
.ibk-button--secondary.ibk-button--blue {
  border-color: var(--secondaryBlue1);
  color: var(--secondaryBlue1);
}
.ibk-button--secondary.ibk-button--blue:hover {
  border-color: var(--secondaryBlue2);
  color: var(--secondaryBlue2);
}

.ibk-button--tertiary.ibk-button--green { color: var(--primaryGreen1); }
.ibk-button--tertiary.ibk-button--green:hover { color: var(--primaryGreen2); }
.ibk-button--tertiary.ibk-button--blue { color: var(--secondaryBlue1); }
.ibk-button--tertiary.ibk-button--blue:hover { color: var(--secondaryBlue2); }

/* Size modifiers */
.ibk-button--small {
  height: 40px;
  font-size: 12px;
  padding: 0 20px;
}

.ibk-button--medium {
  height: 48px;
  font-size: 14px;
}

.ibk-button--large {
  height: 56px;
  font-size: 14px;
}

.ibk-button--full {
  width: 100%;
}

a.ibk-button--center {
  margin: auto;
  display: inline-flex;
}

button.ibk-button--center {
  margin: auto;
  display: flex;
}

@media screen and (max-width: 360px) {
  .ibk-button--small { height: 32px; }
  .ibk-button--medium { height: 44px; }
  .ibk-button--large { height: 48px; }
}

/* Loader button */
.ibk-button__loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 50%;
  animation: ibk-button-loader 500ms linear infinite;
  pointer-events: none;
}

@keyframes ibk-button-loader {
  0% { transform: rotate(0deg); }
  0% { transform: rotate(-360deg); }
}

.ibk-button--primary .ibk-button__loader {
  border-top-color: rgba(255,255,255,0.2);
  border-left-color: rgba(255,255,255,0.2);
  border-right-color: rgba(255,255,255,0.2);
}

.ibk-button--secondary.ibk-button--green .ibk-button__loader,
.ibk-button--tertiary.ibk-button--green .ibk-button__loader {
  border-top-color: var(--primaryGreen4);
  border-left-color: var(--primaryGreen4);
  border-right-color: var(--primaryGreen4);
  border-bottom-color: var(--primaryGreen1);
}

.ibk-button--secondary.ibk-button--blue .ibk-button__loader,
.ibk-button--tertiary.ibk-button--blue .ibk-button__loader {
  border-top-color: var(--secondaryBlue1);
  border-left-color: var(--secondaryBlue1);
  border-right-color: var(--secondaryBlue1);
}

/* Negative */
.ibk-button--negative.ibk-button--primary { background-color: white; }
.ibk-button--negative.ibk-button--green.ibk-button--primary .ibk-button__text { color: var(--primaryGreen1); }
.ibk-button--negative.ibk-button--blue.ibk-button--primary .ibk-button__text { color: var(--secondaryBlue1); }

.ibk-button--negative.ibk-button--primary:hover { background-color:var(--gray5); }
.ibk-button--negative.ibk-button--primary.ibk-button--green:hover .ibk-button__text { color: var(--primaryGreen2); }
.ibk-button--negative.ibk-button--primary.ibk-button--blue:hover .ibk-button__text { color: var(--secondaryBlue2); }
.ibk-button--negative.ibk-button--primary.ibk-button--green .ibk-button__loader {
  border-top-color: var(--primaryGreen4);
  border-left-color: var(--primaryGreen4);
  border-right-color: var(--primaryGreen4);
  border-bottom-color: var(--primaryGreen1);
}
.ibk-button--negative.ibk-button--primary.ibk-button--blue .ibk-button__loader {
  border-top-color: var(--secondaryBlue4);
  border-left-color: var(--secondaryBlue4);
  border-right-color: var(--secondaryBlue4);
  border-bottom-color: var(--secondaryBlue1);
}
.ibk-button--negative.ibk-button--primary.ibk-button--green.ibk-button--disable { background-color: var(--primaryGreen2); }
.ibk-button--negative.ibk-button--primary.ibk-button--blue.ibk-button--disable { background-color: var(--secondaryBlue2); }
.ibk-button--negative.ibk-button--primary .ibk-button__text { color: var(--primaryGreen1); }

.ibk-button--negative.ibk-button--secondary { border-color: white; }
.ibk-button--negative.ibk-button--secondary:hover { border-color:var(--gray5); }
.ibk-button--negative.ibk-button--secondary:hover .ibk-button__text { color: var(--gray5); }
.ibk-button--negative.ibk-button--secondary .ibk-button__text { color: white; }
.ibk-button--negative.ibk-button--secondary .ibk-button__loader {
  border-top-color: var(--gray1);
  border-left-color: var(--gray1);
  border-right-color: var(--gray1);
  border-bottom-color: var(--gray4);
}

.ibk-button--negative.ibk-button--secondary:hover .ibk-button__text { color: var(--gray5); }
.ibk-button--negative.ibk-button--tertiary.ibk-button--green.ibk-button--disable .ibk-button__text { color: var(--primaryGreen2); }
.ibk-button--negative.ibk-button--tertiary.ibk-button--blue.ibk-button--disable .ibk-button__text { color: var(--secondaryBlue2); }

.ibk-button--negative.ibk-button--tertiary .ibk-button__text { color: white; }
.ibk-button--negative.ibk-button--tertiary .ibk-button__loader {
  border-top-color: var(--gray1);
  border-left-color: var(--gray1);
  border-right-color: var(--gray1);
  border-bottom-color: var(--gray4);
}

/* Disabled button */
.ibk-button--disable {
  cursor: default;
  pointer-events: none;
}

.ibk-button--disable.ibk-button--primary {
  background-color: var(--gray4);
  color: var(--gray2);
}

.ibk-button--disable.ibk-button--secondary {
  border-color: var(--gray4);
  color: var(--gray2);
}

.ibk-button--disable.ibk-button--tertiary {
  color: var(--gray2);
}

/* Icon */
.ibk-button__icon {
  font-size: 18px;
  color: inherit;
}
.ibk-button--icon-right .ibk-button__icon { padding-left: 2px; }
.ibk-button--icon-left .ibk-button__icon { padding-right: 2px; }