@import 'styles/mixins';

.button {
  @include button-reset;
  @include focus-effect;

  display: inline-block;
  padding: var(--spacing--m) var(--spacing--l);
  border: var(--border);
  border-radius: var(--border--radius);
  text-transform: uppercase;
  transition: var(--transition);
  cursor: pointer;

  &,
  &:active,
  &:focus,
  &:hover {
    box-shadow: var(--box-shadow);
    text-decoration: none;

    &.primary {
      background-color: var(--color--primary);
      color: var(--color--primary--opposite);
    }

    &.default {
      background-color: var(--color--background--element);
      color: var(--color--foreground);

      .icon {
        color: var(--color--inactive);
      }
    }
  }

  &:focus,
  &:hover {
    &.default:not(:disabled) {
      .icon {
        color: var(--color--foreground--secondary);
      }
    }
  }

  &:active {
    &:not(:disabled) {
      .content {
        position: relative;
        top: 1px;
      }
    }
  }

  &[disabled] {
    @include disabled;
  }
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing--l);
  line-height: var(--button--icon--size);

  @include media('<l') {
    gap: var(--spacing--m);
  }
}

.icon {
  flex: 0 0 auto;
  width: var(--button--icon--size);
  height: var(--button--icon--size);
  transition: var(--transition);
}

.label {
  @include ellipsis;

  font-size: var(--font--size--h3);
  transition: var(--transition);
  text-align: start;
}

.wide {
  .content {
    justify-content: normal;
    gap: var(--spacing--l);
  }

  .label {
    flex: 1;
  }
}