@theme(sc-regular-size) {

$theme.sc-segment-view {

  height: 24px;

  .left {
    width: 8px;
    height: 24px;
    @include slice("segmented_normal.png", $left: 100, $width: 8);
  }

  .middle {
    left: 8px; right: 8px;
    height: 24px;
    @include slice("segmented_normal.png", $repeat: repeat-x, $left: 8, $width: 1);
  }

  .right {
    width: 8px;
    height: 24px;
    @include slice("segmented_normal.png", $left: 92, $width: 8);
  }

  &.vertical {
    .left { @include slice("segmented_vertical_normal.png", $left: 0, $width: 8, $height: 24, $top: 24); }
    .middle { @include slice("segmented_vertical_normal.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 24); }
    .right { @include slice("segmented_vertical_normal.png", $right: 0, $width: 8, $height: 24, $top: 24); }
  }

  .sc-button-label {
    font-size: 12px;
    line-height: 24px;
    margin-left: 9px;
    margin-right: 10px;
  }

  img.icon {
    height: 14px;
    top: 5px;
    width: 14px;
  }

  &.sc-first-segment .left {
    @include slice("segmented_normal.png", $width: 8);
  }

  &.sc-last-segment .right {
    @include slice("segmented_normal.png", $right: 0, $width: 8);
  }

  &.sc-first-segment.vertical {
    .left { @include slice("segmented_vertical_normal.png", $left: 0, $width: 8, $height: 24); }
    .middle { @include slice("segmented_vertical_normal.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24); }
    .right { @include slice("segmented_vertical_normal.png", $right: 0, $width: 8, $height: 24); }
  }

  &.sc-last-segment.vertical {
    .left { @include slice("segmented_vertical_normal.png", $left: 0, $width: 8, $height: 24, $top: 48); }
    .middle { @include slice("segmented_vertical_normal.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 48); }
    .right { @include slice("segmented_vertical_normal.png", $right: 0, $width: 8, $height: 24, $top: 48); }
  }


  /* ACTIVE STATE */
  &.active {
    .left { @include slice("segmented_active.png", $left: 100, $width: 8); }
    .right { @include slice("segmented_active.png", $left: 92, $width: 8); }
    .middle { @include slice("segmented_active.png", $left: 8, $width: 1, $repeat: repeat-x); }
  }

  &.active.sc-first-segment {
    .left { @include slice("segmented_active.png", $left: 0, $width: 8); }
  }

  &.active.sc-last-segment {
    .right { @include slice("segmented_active.png", $right: 0, $width: 8); }
  }

  &.active.vertical {
    .left { @include slice("segmented_vertical_active.png", $left: 0, $width: 8, $height: 24, $top: 24); }
    .right { @include slice("segmented_vertical_active.png", $right: 0, $width: 8, $height: 24, $top: 24); }
    .middle { @include slice("segmented_vertical_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 24); }
  }

  &.active.sc-first-segment.vertical {
    .left { @include slice("segmented_vertical_active.png", $left: 0, $width: 8, $height: 24); }
    .middle { @include slice("segmented_vertical_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24); }
    .right { @include slice("segmented_vertical_active.png", $right: 0, $width: 8, $height: 24); }
  }

  &.active.sc-last-segment.vertical {
    .left { @include slice("segmented_vertical_active.png", $left: 0, $width: 8, $height: 24, $top: 48); }
    .middle { @include slice("segmented_vertical_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 48); }
    .right { @include slice("segmented_vertical_active.png", $right: 0, $width: 8, $height: 24, $top: 48); }
  }


  /* SELECTED STATE */
  &.sel {
    .left { @include slice("segmented_selected.png", $left: 100, $width: 8); }
    .right { @include slice("segmented_selected.png", $left: 92, $width: 8); }
    .middle { @include slice("segmented_selected.png", $left: 8, $width: 1, $repeat: repeat-x); }
  }

  &.sel.sc-first-segment {
    .left { @include slice("segmented_selected.png", $left: 0, $width: 8); }
  }

  &.sel.sc-last-segment {
    .right { @include slice("segmented_selected.png", $right: 0, $width: 8); }
  }

  &.sel.vertical {
    .left { @include slice("segmented_vertical_selected.png", $left: 0, $width: 8, $height: 24, $top: 24); }
    .right { @include slice("segmented_vertical_selected.png", $right: 0, $width: 8, $height: 24, $top: 24); }
    .middle { @include slice("segmented_vertical_selected.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 24); }
  }

  &.sel.sc-first-segment.vertical {
    .left { @include slice("segmented_vertical_selected.png", $left: 0, $width: 8, $height: 24); }
    .middle { @include slice("segmented_vertical_selected.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24); }
    .right { @include slice("segmented_vertical_selected.png", $right: 0, $width: 8, $height: 24); }
  }

  &.sel.sc-last-segment.vertical {
    .left { @include slice("segmented_vertical_selected.png", $left: 0, $width: 8, $height: 24, $top: 48); }
    .middle { @include slice("segmented_vertical_selected.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 48); }
    .right { @include slice("segmented_vertical_selected.png", $right: 0, $width: 8, $height: 24, $top: 48); }
  }


  /* SELECTED ACTIVE STATE */
  &.sel.active {
    .left { @include slice("segmented_selected_active.png", $left: 100, $width: 8); }
    .right { @include slice("segmented_selected_active.png", $left: 92, $width: 8); }
    .middle { @include slice("segmented_selected_active.png", $left: 8, $width: 1, $repeat: repeat-x); }
  }

  &.sel.active.sc-first-segment {
    .left { @include slice("segmented_selected_active.png", $left: 0, $width: 8); }
  }

  &.sel.active.sc-last-segment {
    .right { @include slice("segmented_selected_active.png", $right: 0, $width: 8); }
  }

  &.sel.active.vertical {
    .left { @include slice("segmented_vertical_selected_active.png", $left: 0, $width: 8, $height: 24, $top: 24); }
    .right { @include slice("segmented_vertical_selected_active.png", $right: 0, $width: 8, $height: 24, $top: 24); }
    .middle { @include slice("segmented_vertical_selected_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 24); }
  }

  &.sel.active.sc-first-segment.vertical {
    .left { @include slice("segmented_vertical_selected_active.png", $left: 0, $width: 8, $height: 24); }
    .middle { @include slice("segmented_vertical_selected_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24); }
    .right { @include slice("segmented_vertical_selected_active.png", $right: 0, $width: 8, $height: 24); }
  }

  &.sel.active.sc-last-segment.vertical {
    .left { @include slice("segmented_vertical_selected_active.png", $left: 0, $width: 8, $height: 24, $top: 48); }
    .middle { @include slice("segmented_vertical_selected_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 24, $top: 48); }
    .right { @include slice("segmented_vertical_selected_active.png", $right: 0, $width: 8, $height: 24, $top: 48); }
  }

}

}