/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

:root {
  --tabs-font-family: var(--font-family);
  --tabs-tab-padding: calc(var(--space) * 0.5) var(--space);
  --tabs-tab-font-size: var(--font-size);
  --tabs-tab-line-height: calc(var(--space) * 1.5);
  --tabs-tab-indicator-color: #a8abb5;
  --tabs-tab-indicator-size: 2px;
  --tabs-tab-transition-duration: var(--transition-duration);
  --tabs-tab-primary-indicator-color: var(--color-primary);
  --tabs-tab-success-indicator-color: var(--color-success);
  --tabs-tab-warning-indicator-color: var(--color-warning);
  --tabs-tab-danger-indicator-color: var(--color-danger);
  --tabs-tab-info-indicator-color: var(--color-info);

  --tabs-vertical-tab-padding: calc(var(--space) * 0.875)
    calc(var(--space) * 1.5);

  --tabs-vertical-tab-border-radius-small: 2px;
  --tabs-vertical-tab-border-radius: 3px;
  --tabs-vertical-tab-border-radius-large: 4px;

  --tabs-vertical-tab-active-background: var(--tabs-tab-indicator-color);
  --tabs-vertical-tab-hover-background: color-mod(
    var(--tabs-vertical-tab-active-background) alpha(15%)
  );
  --tabs-vertical-tab-primary-active-background: var(--color-primary);
  --tabs-vertical-tab-primary-hover-background: color-mod(
    var(--tabs-vertical-tab-primary-active-background) alpha(15%)
  );
  --tabs-vertical-tab-success-active-background: var(--color-success);
  --tabs-vertical-tab-success-hover-background: color-mod(
    var(--tabs-vertical-tab-success-active-background) alpha(15%)
  );
  --tabs-vertical-tab-warning-active-background: var(--color-warning);
  --tabs-vertical-tab-warning-hover-background: color-mod(
    var(--tabs-vertical-tab-warning-active-background) alpha(15%)
  );
  --tabs-vertical-tab-danger-active-background: var(--color-danger);
  --tabs-vertical-tab-danger-hover-background: color-mod(
    var(--tabs-vertical-tab-danger-active-background) alpha(15%)
  );
  --tabs-vertical-tab-info-active-background: var(--color-info);
  --tabs-vertical-tab-info-hover-background: color-mod(
    var(--tabs-vertical-tab-info-active-background) alpha(15%)
  );
}

/* Reset */
.container {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  font-family: var(--tabs-font-family);
  vertical-align: middle;
}

.tab {
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-block;
  cursor: pointer;
  padding: var(--tabs-tab-padding);
  font-size: var(--tabs-tab-font-size);
  line-height: var(--tabs-tab-line-height);
  user-select: none;
  transition-property: box-shadow, background, color;
  transition-duration: var(--tabs-tab-transition-duration);
  transition-timing-function: ease;
}

.active {
  cursor: default;
}

.horizontal {
  flex-flow: row nowrap;

  & .tab {
    text-align: center;

    &.active {
      cursor: default;
      box-shadow: inset 0 calc(0px - var(--tabs-tab-indicator-size)) 0 0
        var(--tabs-tab-indicator-color);
    }
  }
}

.vertical {
  flex-flow: column nowrap;

  & .tab {
    text-align: left;
    box-shadow: none;
    min-width: 120px;
    padding: var(--tabs-vertical-tab-padding);
    border-radius: var(--tabs-vertical-tab-border-radius);

    &:hover {
      background-color: var(--tabs-vertical-tab-hover-background);
    }

    &.active {
      color: #fff;
      text-shadow: 0 1px 1px color-mod(#000 alpha(20%));
      background-color: var(--tabs-vertical-tab-active-background);
    }
  }
}

/* Intent */
.primary {
  &.horizontal {
    & .active {
      box-shadow: inset 0 calc(0px - var(--tabs-tab-indicator-size)) 0 0
        var(--tabs-tab-primary-indicator-color);
    }
  }

  &.vertical {
    & .tab {
      &:hover {
        background-color: var(--tabs-vertical-tab-primary-hover-background);
      }

      &.active {
        background-color: var(--tabs-vertical-tab-primary-active-background);
      }
    }
  }
}

.success {
  &.horizontal {
    & .active {
      box-shadow: inset 0 calc(0px - var(--tabs-tab-indicator-size)) 0 0
        var(--tabs-tab-success-indicator-color);
    }
  }

  &.vertical {
    & .tab {
      &:hover {
        background-color: var(--tabs-vertical-tab-success-hover-background);
      }

      &.active {
        background-color: var(--tabs-vertical-tab-success-active-background);
      }
    }
  }
}

.warning {
  &.horizontal {
    & .active {
      box-shadow: inset 0 calc(0px - var(--tabs-tab-indicator-size)) 0 0
        var(--tabs-tab-warning-indicator-color);
    }
  }

  &.vertical {
    & .tab {
      &:hover {
        background-color: var(--tabs-vertical-tab-warning-hover-background);
      }

      &.active {
        background-color: var(--tabs-vertical-tab-warning-active-background);
      }
    }
  }
}

.danger {
  &.horizontal {
    & .active {
      box-shadow: inset 0 calc(0px - var(--tabs-tab-indicator-size)) 0 0
        var(--tabs-tab-danger-indicator-color);
    }
  }

  &.vertical {
    & .tab {
      &:hover {
        background-color: var(--tabs-vertical-tab-danger-hover-background);
      }

      &.active {
        background-color: var(--tabs-vertical-tab-danger-active-background);
      }
    }
  }
}

.info {
  &.horizontal {
    & .active {
      box-shadow: inset 0 calc(0px - var(--tabs-tab-indicator-size)) 0 0
        var(--tabs-tab-info-indicator-color);
    }
  }

  &.vertical {
    & .tab {
      &:hover {
        background-color: var(--tabs-vertical-tab-info-hover-background);
      }

      &.active {
        background-color: var(--tabs-vertical-tab-info-active-background);
      }
    }
  }
}