.a_tabs {
  --a_tabs_border_width: var(--a_border_width, 1px);
  --a_tabs_border_color: var(--a_border_color, #dee2e6);
  --a_tabs_link_border_width: var(--a_border_width);
  --a_tabs_link_border_color: transparent transparent var(--a_border_color) transparent;
  --a_tabs_link_color: var(--a_color_text, #212529);
  --a_tabs_link_bg: inherit;
  --a_tabs_link_padding_x: 1rem;
  --a_tabs_link_padding_y: .5rem;
  --a_tabs_link_cursor: pointer;
  --a_tabs_font_size: 1rem;
  --a_tabs_border_radius: var(--a_border_radius, 0.375rem);
  --a_tabs_link_color_active: var(--a_color_primary);
  --a_tabs_boxed_link_active_border_color: var(--a_border_color) var(--a_border_color) var(--a_color_white) var(--a_border_color);
  --a_tabs_boxed_link_active_bg: var(--a_color_white, #fff);
  --a_tabs_boxed_link_active_color: var(--a_color_primary);
  --a_tabs_display: block;
  // hover
  --a_tabs_botom_hover_color: var(--a_color_gray_700, #495057);
  --a_tabs_link_hover_color: var(--a_color_gray_900, #212529);
  --a_tabs_focus_color: var(--a_color_focus);
  --a_tabs_boxed_link_bg_hover: var(--a_color_gray_100, #f8f9fa);

  // disabled
  --a_tabs_link_disabled_cursor: default;
  --a_tabs_link_disabled_border_color: transparent transparent var(--a_border_color) transparent;
  --a_tabs_link_disabled_color: var(--a_color_gray_600, #6c757d);
  --a_tabs_link_disabled_bg: inherit;

  display: var(--a_tabs_display);
  padding: .5rem;
}
.a_tabs_small {
  --a_tabs_font_size: .75rem;
  --a_tabs_link_padding_x: 0.75rem;
  --a_tabs_link_padding_y: 0.375rem;
}
.a_tabs_medium {
  --a_tabs_font_size: 1.25rem;
  --a_tabs_link_padding_x: 1.25rem;
  --a_tabs_link_padding_y: 0.625rem;
}
.a_tabs_large {
  --a_tabs_font_size: 1.5rem;
  --a_tabs_link_padding_x: 1.5rem;
  --a_tabs_link_padding_y: 0.75rem;
}
.a_tabs__box {
  align-items: stretch;
  display: flex;
  font-size: var(--a_tabs_font_size);
  justify-content: space-between;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

.a_tabs__list {
  list-style: none;
  align-items: center;
  border-bottom-color: var(--a_tabs_border_color);
  border-bottom-style: solid;
  border-bottom-width: var(--a_tabs_border_width);
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}
.a_tabs__list__item {
  display: block;
}
.a_tabs__list__link {
  align-items: center;
  border-width: var(--a_tabs_link_border_width);
  border-color: var(--a_tabs_link_border_color);
  border-style: solid;
  color: var(--a_tabs_link_color);
  display: flex;
  justify-content: center;
  margin-bottom: calc(-1 * var(--a_tabs_border_width));
  padding: var(--a_tabs_link_padding_y) var(--a_tabs_link_padding_x);
  vertical-align: top;
  background-color: var(--a_tabs_link_bg);
  position: relative;
  cursor: var(--a_tabs_link_cursor);
  border-radius: var(--a_tabs_border_radius) var(--a_tabs_border_radius) 0 0;
  &:hover {
    --a_tabs_link_border_color: transparent transparent var(--a_tabs_botom_hover_color) transparent;
    --a_tabs_link_color: var(--a_tabs_link_hover_color);
  }
  &:focus {
    box-shadow: inset 0 0 1px 3px var(--a_tabs_focus_color);
    outline: none;
  }
}
.a_tabs__list__link_active {
  --a_tabs_link_border_color: transparent transparent var(--a_color_primary) transparent;
  --a_tabs_link_color: var(--a_tabs_link_color_active);
  z-index: 1;
  &:hover {
    --a_tabs_link_color: var(--a_tabs_link_color_active);
  }
}

.a_tabs_boxed {

  //.a_tabs__list__link {
  //  &:hover {
  //    --a_tabs_link_bg: var(--a_tabs_boxed_link_bg_hover);
  //  }
  //
  //  //&:focus,
  //  //.a_tabs__list__item_active &:focus {
  //  //
  //  //}
  //}
  .a_tabs__list__link:hover {
    --a_tabs_link_bg: var(--a_tabs_boxed_link_bg_hover);
  }
  .a_tabs__list__link_active {
    --a_tabs_link_border_color: var(--a_tabs_boxed_link_active_border_color);
    --a_tabs_link_bg: var(--a_tabs_boxed_link_active_bg);
  }
}

.a_tabs {
  & .a_tabs__list__link_disabled,
  &.a_tabs_boxed .a_tabs__list__link_disabled {
    --a_tabs_link_cursor: var(--a_tabs_link_disabled_cursor);
    --a_tabs_link_border_color: var(--a_tabs_link_disabled_border_color);
    --a_tabs_link_color: var(--a_tabs_link_disabled_color);
    --a_tabs_link_bg: var(--a_tabs_link_disabled_bg);
    box-shadow: none;
  }
}
.a_tabs__contents {
  border: var(--a_tabs_border_width) solid var(--a_tabs_border_color);
  margin-top: -1px;
}
.a_tabs__content {
  padding: var(--a_tabs_link_padding_y) var(--a_tabs_link_padding_x);
  display: none;
}
.a_tabs__content_show {
  display: block;
}
.a_tabs_vertical {
  --a_tabs_display: flex;
  --a_tabs_link_border_color: transparent var(--a_border_color) transparent transparent;
  --a_tabs_link_disabled_border_color: transparent var(--a_border_color) transparent transparent;
  .a_tabs__list {
    border-bottom: 0;
  }
  .a_tabs__box {
    overflow: visible;
    white-space: normal;
    flex: 1;
  }
  .a_tabs__list {
    flex-direction: column;
  }
  .a_tabs__list__item {
    width: 100%;
  }
  .a_tabs__list__link {
    border-radius: var(--a_tabs_border_radius) 0 0 var(--a_tabs_border_radius);
    margin-bottom: 0;
    margin-right: calc(-1 * var(--a_tabs_border_width));
    &:hover {
      --a_tabs_link_border_color: transparent var(--a_tabs_botom_hover_color) transparent transparent;
    }
  }
  .a_tabs__list__link_active {
    --a_tabs_link_border_color: transparent var(--a_color_primary) transparent transparent;
  }
  .a_tabs__contents {
    flex: 2;
  }
  &.a_tabs_boxed {
    .a_tabs__list__link_active {
      --a_tabs_link_border_color: var(--a_border_color) transparent var(--a_border_color) var(--a_border_color);
    }
  }
}