@freshworks/crayons/dist/collection/components/tabs/tabs.css

Crayons Web Components library

/* Need to check with designer */
/* Need to check with designer */
:host {
  font-family: var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/**
  @prop --fw-tabs-width: width of the tab container.
  @prop --fw-tabs-height: height of the tab container.
  @prop --fw-tabs-margin-l: left margin for the tab items
  @prop --fw-tabs-margin-r: right margin for the tab items
  @prop --fw-tabs-padding-left: left padding for the tab items
  @prop --fw-tabs-padding-right: right padding for the tab items
*/
.tabs {
  display: flex;
  flex-direction: column;
  width: var(--fw-tabs-width, "inherit");
  height: var(--fw-tabs-height, "inherit");
}
.tabs__items__nav {
  padding: 0;
  padding-left: var(--fw-tabs-padding-left, 12px);
  padding-right: var(--fw-tabs-padding-right, 12px);
  margin-left: var(--fw-tabs-margin-l, 0);
  margin-right: var(--fw-tabs-margin-r, 0);
  display: flex;
  border-bottom: 1px solid #ebeff3;
  overflow-x: auto;
  overflow-y: hidden;
}
.tabs__items__nav__box {
  background-color: #f5f7f9;
  border: 1px solid #ebeff3;
  box-sizing: border-box;
  border-radius: 4px;
}
.tabs__items__tabs {
  display: flex;
  flex-direction: row;
  position: relative;
}