@import "../settings/variables";

.segmented-controller {
  align-items: center;
  display: inline-flex;
  height: $segmented-controller-height;
  justify-content: center;

  &--block {
    display: flex;

    .segmented-controller__segment {
      flex: 1 1 0%;
    }
  }

  &__segment {
    align-items: center;
    background: none;
    border: 1px solid $segmented-controller-border-color;
    border-right: 0;
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    justify-content: center;
    min-width: 0;
    position: relative;

    &__button {
      background: transparent;
      border-width: 0;
      color: inherit;
      cursor: inherit;
      height: 100%;
      padding: 0 spacing(md);
      width: 100%;

      &:focus {
        // cannot use focus() mixin because this button does not style the border
        // - replace mixin's border by using outline
        // - increase box-shadow by 1px for outline overlap
        // - zindex to place outline on top of right neighbor's border
        box-shadow: 0 0 0 3px $core-blue-94;
        outline: 1px solid $button-focus-border-color;
        z-index: 1;
      }
    }

    &__label {
      color: $segmented-controller-color;
      display: block;
      font-size: $segmented-controller-font-size;
      font-weight: $segmented-controller-font-weight;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &:first-child {
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
    }

    &:last-child {
      border-bottom-right-radius: 4px;
      border-right: 1px solid $segmented-controller-border-color;
      border-top-right-radius: 4px;
    }

    + .segmented-controller__segment--active {
      border-left-color: $segmented-controller-border-color;
    }

    &:hover {
      border-color: $segmented-controller-hover-border-color;
      color: $segmented-controller-hover-border-color;

      + .segmented-controller__segment {
        border-left-color: $segmented-controller-hover-border-color;
      }

      &.segmented-controller__segment--disabled
        + .segmented-controller__segment {
        border-left-color: $segmented-controller-disabled-border-color;
      }

      &.segmented-controller__segment--active {
        border-left-color: $segmented-controller-border-color;

        &:first-child {
          border-left-color: $segmented-controller-active-border-color;
        }
      }
    }

    &--active {
      background: $segmented-controller-active-background-color;
      border-color: $segmented-controller-active-border-color;
      cursor: default;

      .segmented-controller__segment__label {
        color: $segmented-controller-active-color;
      }

      &:last-child {
        border-right-color: $segmented-controller-active-border-color;
      }

      &:hover {
        & + .segmented-controller__segment {
          border-left-color: $segmented-controller-border-color;
        }

        & + .segmented-controller__segment--disabled {
          border-left-color: $segmented-controller-disabled-border-color;
        }
      }
    }

    &--disabled {
      cursor: default;

      &.segmented-controller__segment__button {
        pointer-events: none;
      }

      .segmented-controller__segment__label {
        color: $segmented-controller-disabled-color;
      }

      + .segmented-controller__segment--active {
        border-left-color: $segmented-controller-disabled-border-color;
      }

      &.segmented-controller__segment--active {
        background: $segmented-controller-selected-disabled-background-color;
        border-color: $segmented-controller-disabled-border-color;

        .segmented-controller__segment__label {
          color: $segmented-controller-selected-disabled-color;
        }

        &:first-child:hover {
          border-left-color: $segmented-controller-disabled-border-color;
        }
      }
    }
  }
}

/* START procore app.css button tag conflicts */
.segmented-controller__segment {
  border-radius: 0;

  &:hover {
    background-color: $segmented-controller-hover-background-color;
  }

  &.segmented-controller__segment--active:hover {
    background-color: $segmented-controller-active-background-color;
  }

  &.segmented-controller__segment--disabled,
  &:disabled {
    background-color: $segmented-controller-disabled-background-color;
    border-color: $segmented-controller-disabled-border-color;
  }

  &.segmented-controller__segment--active.segmented-controller__segment--disabled,
  &.segmented-controller__segment--active:disabled {
    background-color: $segmented-controller-selected-disabled-background-color;
  }
}

.segmented-controller__segment__button {
  &:disabled,
  &:hover {
    background: transparent;
    border-width: 0;
  }
}
/* END procore app.css button tag conflicts */