@prefix: simple-button;

.@{prefix} {
  padding: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #E9E9E9;
  border: 1px solid #CCCCCC;
  cursor: pointer;
  transition: all 300ms;

  &.checked,
  &:hover {
    color: #FFFFFF;
    background-color: #1199ff;
    border: 1px solid #1199ff;
  }

  &:active {
    transform: translateY(1px);
  }

  &- {
    &dark {
      background-color: #333333;
      border: 1px solid #444444;
      color: #CCCCCC;

      &.checked,
      &:hover {
        color: #FFFFFF;
        background-color: #1199ff;
        border: 1px solid #1199ff;
      }
    }

    &small{
      padding: 0 8px;
      font-size: 12px;
      height: 22px;
    }
    &middle{
      height: 25px;
    }
    &large{
      height: 32px;
      padding: 0px 16px;
      font-size: 18px;
    }
  }
}