@import '../../../theme/mixins';

.Button {
  position: relative;
  display: block;
  cursor: pointer;
  font-weight: 600;
  padding: 5px 9px;
  text-align: center;
  text-transform: inherit;
  text-overflow: ellipsis;
  user-select: none;
  width: auto;
  border: 1px solid transparent;
  border-radius: var(--borderRadius);

  &.Primary {
    background-color: var(--color-accent);
    color: var(--color-light);

    &:active, &:focus {
      background-color: var(--color-accent-active);
    }

    &:disabled {
      background-color: var(--color-accent-disabled);
      pointer-events: none;
      cursor: not-allowed;
    }
  }

  &.Secondary {
    background-color: transparent;
    color: var(--color-main);
    border: 1px solid var(--color-border);

    &:active, &:focus {
      opacity: .7;
    }

    &:disabled {
      opacity: .3;
      pointer-events: none;
      cursor: not-allowed;
    }
  }

  &.small {
    font-size: var(--small-font);
    background: transparent;
    border: none;
    color: var(--color-accent);

    &:disabled {
      background: transparent;
      opacity: .3;
      pointer-events: none;
    }
  }
}

.Text {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.Skeleton {
  height: 30px;
  @include SkeletonAnimation();
}
