@import '../../blueprint/variables';

.#{$ns}-simple-tab {
  display: inline-block;
  bottom: -1px;
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 7px 15px;
  z-index: 2;
  font-weight: get-font-weight(medium);
  border-width: 1px;
  margin-left: -1px;

  &.selected-tab {
    cursor: default;
  }

  &:first-of-type {
    border-top-left-radius: get-border-radius(default);
    margin-left: 0;
  }

  &:last-of-type {
    border-top-right-radius: get-border-radius(default);
  }

  &:focus {
    outline: none;
  }

  &.disabled-tab {
    cursor: not-allowed;
    opacity: 0.65;
  }
}

.#{$ns}-simple-tab-list {
  margin: 0px;
  padding: 0px;
  user-select: none;
}

.#{$ns}-simple-tab-panel {
  border-width: 1px;
  display: none;
  border-radius: get-border-radius(default);
  border-top-left-radius: 0px;

  &#react-tabs-1 {
    border-top-left-radius: 0px;
  }
}

// colors
.#{$ns}-simple-tab {
  color: get-color(gray, 5);
  background-color: get-color(gray, 1);

  &.selected-tab {
    color: get-color(gray, 6);
    border-bottom-color: get-color(white);
    background-color: get-color(white);

    &:hover {
      color: get-color(gray, 6);
    }
  }

  &:hover {
    color: get-color(black);
  }

  &.disabled-tab {
    &:hover {
      color: get-color(gray, 5);
    }
  }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    color: get-color(gray, 5);
    background-color: get-color(gray, 7);
    border-color: rgba(16, 22, 26, 0.4);

    &.selected-tab {
      color: white;
      background-color: get-color(gray, 8);
      border-bottom-color: get-color(gray, 8);

      &:hover {
        color: white;
      }
    }

    &:hover {
      color: get-color(gray, 3);
    }

    &.disabled-tab {
      &:hover {
        color: get-color(gray, 5);
      }
    }
  }
}

.bp3-simple-tab-panel {
  background-color: white;

  .#{$ns}-dark & {
    background-color: get-color(gray, 8);
    border-color: rgba(16, 22, 26, 0.4);
  }
}