.button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--static-space-8);
    border-radius: var(--radius-m);
    border-color: var(--static-transparent);
    border-width: 1px;
    border-style: solid;
    background: var(--static-transparent);
    color: var(--neutral-on-background-strong);
    transition: var(--transition-property) var(--transition-duration-micro-medium) var(--transition-timing-function);
    cursor: pointer;
	user-select: none;
    white-space: nowrap;
  
    &:hover {
        background: var(--neutral-alpha-weak);
        border-color: var(--neutral-alpha-medium);
    }
  
    &.selected {
        background-color: var(--neutral-alpha-medium);
        border-color: var(--neutral-alpha-medium);
    }

    &:disabled {
        background: var(--neutral-solid-weak);
        color: var(--neutral-on-solid-weak);
		border: none;
		pointer-events: none;
		cursor: not-allowed;
    }
}

.labelWrapper {
    display: flex;
    align-items: center;
    gap: var(--static-space-8);
    max-width: 100%;
}

.label {
    padding: var(--static-space-4) var(--static-space-4);
}

.s {
    padding: var(--static-space-2) var(--static-space-8);
}

.m {
    padding: var(--static-space-4) var(--static-space-12);
}
  
.l {
    padding: var(--static-space-8) var(--static-space-16);
}

.start {
    justify-content: flex-start;
}
  
.center {
    justify-content: center;
}
  
.fit {
    width: auto;
}
  
.fill {
    width: 100%;
}

.truncate {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}