@use "sizes";
@use "colors";
@use "states";

.draco-button {
  cursor: pointer;
  font-family: var(--token-typography-display-400-font-family);
  font-weight: var(--token-typography-font-weight-regular);
  border-radius: var(--token-border-radius-medium);
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;

  // Handle border radius shapes
  &.draco-button--shape-circle,
  &.draco-button--shape-rounded {
    border-radius: var(--token-border-radius-full);
  }

  .draco-button__icon {
    display: flex;
  }

  .draco-button__text {
    flex: 1 0 0;
    display: flex;
    position: relative;
    text-align: center;
  }

  .draco-button--external-indicator {
    display: inline-flex;
    color: currentColor;
    transform: translateY(-1px);
  }
}