@theme(sc-regular-size) {

  $theme.button {

    .sc-button-label {
      height: 22px;
      padding-top:2px;
    }

    @include slices("normal_button.png", $left: 3, $right: 3);

    &.active {
      @include slices("active_button.png", $left: 3, $right: 3);
    }

    &.sel, &.def {
      @include slices("selected_button.png", $left: 3, $right: 3);    
  
      &.active {
        @include slices("selected_active_button.png", $left: 3, $right: 3);    
      }
    }
    
    &.sc-static-layout .sc-button-label {
      margin-left: 12px;
      margin-right: 12px;
    }
  }

  @theme(point-left) {
    $theme.button {
      @include slices("normal_button_pointer.png", $left: 12, $right: 12, $skip: middle right);

      .middle { left: 12px; }
      .right { right:10px; width:3px }

      &.active {
        @include slices("active_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
        .middle { left: 12px; }
        .right { right:10px; width:3px }
      }

      &.sel, &.def {
        @include slices("selected_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
        .middle { left: 12px; }
        .right { right:10px; width:3px }
      }

      &.sel.active, &.def.active {
        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
        .middle { left: 12px; }
        .right { right:10px; width:3px }
      }
    }
  }

  @theme(point-right) {
    $theme.button {
      @include slices("normal_button_pointer.png", $left: 12, $right: 12, $skip: middle left);

      .middle { right: 12px; }
      .left { left:10px; width:3px }

      &.active {
        @include slices("active_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
        .middle { right: 12px; }
        .left { left:10px; width:3px }
      }

      &.sel, &.def {
        @include slices("selected_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
        .middle { right: 12px; }
        .left { left:10px; width:3px }
      }

      &.sel.active, &.def.active {
        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
        .middle { right: 12px; }
        .left { left:10px; width:3px }
      }
    }
  }

  @theme(capsule) {
    $theme.button {
      @include slices("normal_button_capsule.png", $left: 12, $right: 12, $skip: middle);
      
      & > .middle { left: 12px; right: 12px; }

      &.active, &.sel, &.def, &.sel.active, &.sel.active.def {
        & > .middle { left: 12px; right: 12px; }
      }

      &.active {
        @include slices("active_button_capsule.png", $left: 12, $right: 12, $skip: middle);
        .middle { left: 12px; right: 12px; }
      }

      &.sel, &.def {
        @include slices("selected_button_capsule.png", $left: 12, $right: 12, $skip: middle);
        .middle { left: 12px; right: 12px; }
      }

      &.sel.active, &.def.active {
        @include slices("selected_active_button_capsule.png", $left: 12, $right: 12, $skip: middle);
        .middle { left: 12px; right: 12px; }
      }
    }
  }
}