html,
body,
* {
  color: #424143;
  font-size: 1rem !important;
  font-family: 'Roboto';
  line-height: normal !important;
  letter-spacing: normal !important;
}

.sidebar-item svg {
  color: #6d6e71 !important;
  fill: #6d6e71 !important;
  width: 1rem;
  height: 1rem;
}

.sidebar-item[data-nodetype='story'] {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
  font-size: 1rem;
  color: #424143;
  flex: 1 1 auto;
}

.sidebar-item[data-nodetype='story']::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  pointer-events: none;
}

.sidebar-item[data-nodetype='story'] a {
  display: none;
}

.sidebar-item[data-nodetype='story'] a[tabindex='-1'] {
  width: 100%;
  display: inline-flex;
}

.sidebar-item[data-nodetype='document']::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  pointer-events: none;
}

.sidebar-item[data-nodetype='component']::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  pointer-events: none;
}

.sidebar-item[data-nodetype='root']::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  pointer-events: none;
}

.sidebar-item:hover {
  background: unset !important;
}
.sidebar-item:hover::after {
  background: #0000000a !important;
}

/* .sidebar-item:not([data-selected='true']):focus {
  background-color: inherit;
  background: inherit;
} */

div[data-testid='tooltip'] a span {
  color: #424143 !important;
}

.sidebar-item a {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.sidebar-item[data-nodetype='document'] {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
  font-size: 1rem;
  padding-top: 4px;
  padding-bottom: 4px;
  text-wrap: balance;
}

.sidebar-item[data-nodetype='document'] a {
  display: none;
}

.sidebar-item[data-nodetype='document'] a[tabindex='-1'] {
  width: 100%;
  display: inline-flex;
}

.sidebar-item[data-nodetype='component'] {
  font-size: 1rem;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
  gap: 0.5rem;
  color: #424143 !important;
}

.sidebar-item[data-nodetype='component'] a {
  display: none;
}

.sidebar-item[data-nodetype='component'] a:first-of-type {
  width: 100%;
  display: inline-flex;
}

.sidebar-item[data-selected='true'] {
  background-color: #c4deff !important;
  color: #424143 !important;
  font-weight: 400 !important;
}

.sidebar-subheading[data-nodetype='root'] {
  font-size: 1.5rem !important;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: stretch;
  position: relative;
  cursor: pointer;
  color: #424143;
  text-transform: capitalize !important;
  width: 100%;
  flex: 1 1 auto;
}

.sidebar-subheading[data-nodetype='root'] button:first-of-type {
  width: 100%;
  height: 100%;
  gap: 1rem;
  min-height: 3rem;
}

.sidebar-subheading[data-nodetype='root'] button:hover {
  background: unset;
}

.sidebar-subheading[data-nodetype='root'] button:focus {
  background: unset;
}

.sidebar-subheading[data-nodetype='root'] button::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  pointer-events: none;
}

.sidebar-subheading[data-nodetype='root'] button:hover::after {
  background: #0000000a !important;
}

.sidebar-item[data-nodetype='story'] svg {
  fill: #6d6e71 !important;
}
.sidebar-item[data-selected='true'] svg {
  fill: #6d6e71 !important;
}

/**
  * Expander Icon Collapsed State
  */
.sidebar-item[aria-expanded='false'] span:first-of-type {
  border-style: solid;
  border-width: 2px 2px 0px 0px;
  border-color: #6d6e71;
  display: block;
  height: 8px;
  width: 8px;
  transform: rotate(45deg);
  transform-origin: center;
  align-self: center;
  margin-left: 0.5rem;
  margin-bottom: 0.25rem;
}

/**
  * Expander Icon Expanded State
  */
.sidebar-item[aria-expanded='true'] span:first-of-type {
  border-style: solid;
  border-width: 2px 2px 0px 0px;
  border-color: #6d6e71;
  display: block;
  height: 8px;
  width: 8px;
  transform: rotate(135deg);
  transform-origin: center;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
  align-self: center;
}

/**
  * + Icon beside the Component Name
  */
.sidebar-item[data-nodetype='component'] svg:first-of-type {
  display: none;
}

.sidebar-item[data-nodetype='component'] div[data-testid='context-menu'] {
  display: none !important;
}

.sidebar-item[data-nodetype='document'] div[data-testid='context-menu'] {
  display: none !important;
}

.sidebar-item[data-nodetype='story'] div[data-testid='context-menu'] {
  display: none !important;
}

/**
  * Expander Icon Collapsed State
  */
.sidebar-subheading button[aria-expanded='false'] span:first-of-type {
  border-style: solid;
  border-width: 2px 2px 0px 0px;
  border-color: #6d6e71;
  display: block;
  height: 8px;
  width: 8px;
  transform: rotate(45deg);
  transform-origin: center;
  align-self: center;
  margin-left: 0.5rem;
  margin-bottom: 0.25rem;
}

/**
  * Expander Icon Expanded State
  */
.sidebar-subheading button[aria-expanded='true'] span:first-of-type {
  border-style: solid;
  border-width: 2px 2px 0px 0px;
  border-color: #6d6e71;
  display: block;
  height: 8px;
  width: 8px;
  transform: rotate(135deg);
  transform-origin: center;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
  align-self: center;
}

.tabbutton {
  font-weight: 400 !important;
}

.tabbutton-selected {
  font-weight: 500 !important;
  color: #0055b8;
}

#storybook-explorer-searchfield {
  color: #424143;
}

#storybook-explorer-searchfield::placeholder {
  color: #4b4b4d;
}