@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); }
}

}

}