// Component: Navigation
// Project: WFPUI
// Author: Matthew Morek (me@matthewmorek.com)
// URL: http://matthewmorek.com

// -----------------------------------------------------------------------------
// Segmented Controls
// [docs-url]/components/navigation/#segmented-controls
// -----------------------------------------------------------------------------
%seg-control {
  @extend %no-list;
  display: inline-block;
  height: 32px;
  text-align: center;
}

%seg-control--item {
  display: table-cell;
  border: 1px solid $primary;
  border-left: none;
  position: relative;
  z-index: 1;
  vertical-align: middle;
  &:first-child {
    border-radius: 2px 0 0 2px;
    border-left: 1px solid $primary;
  }
  &:last-child {
    border-radius: 0 2px 2px 0;
  }
}

%seg-control--link {
  padding: 0.35rem 0.75rem;
  width: auto;
  border: none;
  color: $primary;
  font-size: 0.875rem;
  display: block;
  &:hover {
    color: $grey;
  }
  &.active {
    background-color: $primary;
    color: $white;
  }
}

.wfp-seg-control {
  @extend %seg-control;
  .seg-control--item {
    @extend %seg-control--item;
  }
  .seg-control--link {
    @extend %seg-control--link;
  }
}

// Component: Navigation
// Project: WFPUI
// Author: Matthew Morek (me@matthewmorek.com)
// URL: http://matthewmorek.com

// -----------------------------------------------------------------------------
// Segmented Controls
// [docs-url]/components/navigation/#segmented-controls
// -----------------------------------------------------------------------------
%seg-control {
  @extend %no-list;
  display: inline-block;
  height: 32px;
  padding: 0;
  text-align: center;
}

%seg-control--item {
  display: table-cell;
  border: 1px solid $primary;
  border-left: none;
  position: relative;
  z-index: 1;
  vertical-align: middle;
  &:first-child {
    border-radius: 2px 0 0 2px;
    border-left: 1px solid $primary;
  }
  &:last-child {
    border-radius: 0 2px 2px 0;
  }
}

%seg-control--link {
  padding: 0.35rem 0.75rem;
  width: auto;
  border: none;
  color: $primary;
  font-size: 0.875rem;
  display: block;
  &:hover {
    color: $grey;
  }
  &.active {
    background-color: $primary;
    color: $white;
  }
}

.wfp-seg-control {
  @extend %seg-control;
  .seg-control--item {
    @extend %seg-control--item;
  }
  .seg-control--link {
    @extend %seg-control--link;
  }
}

Remove default padding from `segmented-control`
Remove default padding from `segmented-control`
