$default-size: 24px;

@mixin widget {
  border: solid silver 1px;
  & {
    vertical-align: middle;
  }
}

// Basic Widgets

@mixin text($size: $default-size) {
  @include widget;
  height: $size - (1 + 1) * 2px;
  padding: 1px 0.5em;
}

@mixin textarea {
  @include widget;
  font-size: 100%;
}

@mixin button($size: $default-size) {
  @include widget;
  height: $size;
  cursor: pointer;
}

// Special Widgets

@mixin text-with-button($size: $default-size) {
  @include text($size);
  border-right: none;
  margin-right: 0;
}

@mixin icon-button($size: $default-size) {
  @include button($size);
  width: $size;
  padding: 2px;
  background-color: white;
  img {
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
}