:root {
  --button-padding: 8px 16px;
  --button-min-height: 40px;
  --button-size: 14px;
  --button-border-color: rgba(255, 255, 255, 0);
  --button-background-color: rgba(255, 255, 255, 0);
  --button-color: #363636;
  --button-border-radius: 4px;
  --button-icon-color: var(--button-color);
}

.button-v2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--button-border-radius);
  padding: var(--button-padding);
  min-height: var(--button-min-height);
  font-size: var(--button-size);
  background: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  color: var(--button-color);
  cursor: pointer;
  transition: 0.2s;
  box-sizing: border-box;
  user-select: none;
}

.button-v2:is(:disabled, .is-disabled) {
  --button-border-color: rgba(22, 22, 22, 0.07);
  --button-background-color: rgba(22, 22, 22, 0.07);
  --button-color: #16161670;
  pointer-events: none;
}

.button-v2:hover {
  text-decoration: none;
}

.button-v2 .icon:first-child {
  margin-top: -8px;
  margin-bottom: -8px;
}

.button-v2 .icon:not(:first-child:last-child) {
  margin-left: -8px;
}

/* Icon. */
.button-v2--icon {
  display: flex;
  gap: 16px;
}

/* Size. */
.button-v2--big {
  --button-padding: 8px 16px;
  --button-size: 14px;
  --button-min-height: 48px;
}

.button-v2--m {
  --button-padding: 8px 24px;
  --button-size: 14px;
  --button-min-height: 40px;
}

.button-v2--middle {
  --button-padding: 6px 12px;
  --button-size: 14px;
  --button-min-height: 32px;
}

.button-v2--small {
  --button-padding: 4px 8px;
  --button-size: 12px;
  --button-min-height: 24px;
}

/* Rounded. */
.button-v2--rounded-none {
  --button-border-radius: 0;
}

.button-v2--rounded-small {
  --button-border-radius: 4px;
}

.button-v2--rounded-middle {
  --button-border-radius: 8px;
}

.button-v2--rounded-pull {
  --button-border-radius: 50rem;
}

.button-v2--rounded-circle {
  --button-border-radius: 50rem;
  --button-padding: 0;
  aspect-ratio: 1/1;
  justify-content: center;
}

/* Primary. */
.button-v2--primary {
  --button-border-color: #2060A5;
  --button-background-color: #2060A5;
  --button-color: #FFF;
}

.button-v2--primary:is(:hover, :focus) {
  --button-border-color: #1A5696;
  --button-background-color: #1A5696;
}

.button-v2--primary:active {
  --button-border-color: #5C6F7B;
  --button-background-color: #5C6F7B;
}

/* Secondary */
.button-v2--secondary {
  --button-border-color: #D4D4D4;
  --button-background-color: #fff;
}

.button-v2--secondary:is(:hover, :focus) {
  --button-border-color: #AFAFAF;
  --button-background-color: #fff;
}

.button-v2--secondary:is(:disabled, .is-disabled) {
  --button-border-color: #D4D4D4;
  --button-background-color: #F2F2F2;
}

/* Tag. */
.button-v2--outline,
.button-v2--tag {
  --button-border-color: #D4D4D4;
  --button-background-color: #fff0;
  --button-color: #363636;
}

.button-v2--outline:is(:hover, :focus),
.button-v2--outline:active,
.button-v2--tag:is(:hover, :focus),
.button-v2--tag:active {
  --button-border-color: #E5E5E5;
  --button-background-color: rgba(22, 22, 22, 0.03);
  --button-color: #363636;
}

.button-v2--outline.button-v2--selected,
.button-v2--tag.button-v2--selected {
  --button-background-color: #e5e5e5;
}

/* Danger. */
.button-v2--danger {
  --button-border-color: #FF4D50;
  --button-background-color: #FF4D50;
  --button-color: #FFF;
}

.button-v2--danger:is(:hover, :focus) {
  --button-border-color: #F37174;
  --button-background-color: #F37174;
}

.button-v2--danger:active {
  --button-border-color: #F37174;
  --button-background-color: #F37174;
}

/* Logout. */
.button-v2--logout {
  --button-border-color: #16161608;
  --button-background-color: #16161608;
  --button-color: #FFF;
  --button-padding: 0;
  --button-border-radius: 50rem;
}

.button-v2--logout:is(:hover, :focus) {
  --button-border-color: #16161612;
  --button-background-color: #16161612;
}

.button-v2--logout:active {
  --button-border-color: #16161612;
  --button-background-color: #16161612;
}

/* Submit. */
.button-v2--submit {
  --button-border-radius: 8px;
}

/* Cancel. */
.button-v2--cancel {
  --button-border-color: #d4d4d4;
  --button-background-color: #fff0;
  --button-color: #363636;
  --button-border-radius: 8px;
}

.button-v2--cancel:is(:hover, :focus) {
  --button-border-color: #2CB6F1;
  --button-background-color: #fff0;
  --button-color: #2CB6F1;
}

.button-v2--cancel:active {
  --button-border-color: #5C6F7B;
  --button-background-color: #16161608;
  --button-color: #5C6F7B;
}

/* Link. */
.button-v2--link {
  --button-border-color: #fff0;
  --button-background-color: #fff0;
  --button-color: #363636;
  --button-border-radius: 8px;
}

.button-v2--link:is(:hover, :focus) {
  --button-border-color: #fff0;
  --button-background-color: #fff0;
  --button-color: #2060A5;
}

.button-v2--link:active {
  --button-border-color: #16161608;
  --button-background-color: #16161608;
  --button-color: #2060A5;
}

/* Outline. */
.button-v2--outline.button--selected,
.button-v2--tag.button--selected {
  --button-background-color: #e5e5e5;
  --button-border-color: #e5e5e5;
}

/* Tertiary. */
.button-v2--tertiary {
  --button-background-color: #fff;
  --button-border-color: #2060A5;
  --button-color: #2060A5;
}

.button-v2--tertiary:hover {
  --button-background-color: #CDE5FF;
  --button-border-color: #2060A5;
  --button-color: #2060A5;
}

.button-v2--tertiary:disabled {
  --button-background-color: #F2F2F2;
  --button-border-color: #D4D4D4;
  --button-color: #AFAFAF;
}

.button-v2--square {
  aspect-ratio: 1;
}

/* Icon. */
.button-v2--icon {
  display: flex;
  --button-background-color: rgba(255, 255, 255, 0);
  --button-color: currentColor;
  --button-border-color: rgba(255, 255, 255, 0);
  aspect-ratio: 1;
}

.button-v2--icon .icon:first-child {
  display: flex;
  margin: 0;
}

.button-v2--icon:is(:hover, :focus) {
  --button-background-color: #16161608;
  --button-border-color: rgba(255, 255, 255, 0);
  --button-color: currentColor;
}

.button-v2--icon.button-v2--small {
  --button-padding: 4px;
}

.button-v2--icon.button-v2--middle {
  --button-padding: 6px;
}

.button-v2--icon.button-v2--big {
  --button-padding: 8px;
}

/* Sizing. */
.button-v2--sizing-wider.button-v2--small {
  --button-padding: 4px calc(8px + 4px);
}

.button-v2--sizing-wider.button-v2--middle {
  --button-padding: 6px calc(12px + 6px);
}

.button-v2--sizing-wider.button-v2--big {
  --button-padding: 8px calc(16px + 8px);
}

.button-v2--sizing-tight.button-v2--small {
  --button-padding: 4px calc(8px - 4px);
}

.button-v2--sizing-tight.button-v2--middle {
  --button-padding: 6px calc(12px - 6px);
}

.button-v2--sizing-tight.button-v2--big {
  --button-padding: 8px calc(16px - 8px);
}

.button-v2--sizing-fill {
  flex: 1 1 auto;
}