:host {
  display: block;
  contain: content;
}

.signet-scrolling-menu {
  max-width: 100%;
  position: relative;
}

.header {
  overflow-x: auto;
  display: flex;
  align-items: center;
}
.header .right-arrow {
  position: sticky;
  right: 0;
  display: flex;
}
.header .left-arrow {
  position: sticky;
  left: 0;
}
.header .menu-icon {
  margin-right: 15px;
}
.header .titles-list-container {
  position: absolute;
  background-color: white;
  top: 0;
  left: 40px;
  z-index: 20;
  padding: 10px 16px 10px 0px;
  border-radius: 5px;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
  width: 300px;
}
.header .titles-list-container .title-list {
  cursor: pointer;
  padding-left: 10px;
}
.header .titles-list-container .title-list:not(:last-child) {
  margin-bottom: 10px;
}
.header .titles-list-container .close-icon {
  position: absolute;
  top: 10px;
  right: 16px;
}

.titles {
  display: flex;
  padding: 0 !important;
  overflow: hidden;
  overflow-x: scroll;
  scroll-behavior: smooth;
  position: relative;
}
.titles .title {
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 14px;
}
.titles .title:not(:last-child) {
  margin-right: 20px;
}

.sections {
  max-height: 500px;
  overflow-y: auto;
  margin-top: 20px;
  scroll-behavior: smooth;
}

.section {
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 50px;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.active-title {
  color: var(--primary-main);
  background: rgba(var(--primary-main), 5%);
  font-weight: 400;
  border-radius: 4px;
}

.active-title-list {
  color: var(--primary-main);
  border-left: 3px solid var(--primary-main);
  font-weight: 400;
}

.icon {
  line-height: 0 !important;
  cursor: pointer;
}