.vm-modal-tabs {
  width: 100%;
  height: 60px;
  background: var(--vm-tabs-bg);
  border-radius: 8px 8px 0 0;
  border: none;
  .vm-modal-tabs-wrap {
    height: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    overflow-x: auto;
    box-sizing: border-box;
    padding: 0 16px;
    &.vm-modal-tabs-wrap-scrollable {
      justify-content: flex-start;
    }
    &::-webkit-scrollbar {
      height: 2px !important;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d3d7db !important;
    }
  }

  &-item {
    display: flex;
    height: 36px;
    padding: 0 14px;
    font-size: 16px;
    gap: 8px;
    color: var(--vm-tabs-font-color);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    &-active {
      background: var(--vm-tab-item-active-bg-color);
      border-radius: 26px;
      color: var(--vm-tab-item-active-color);
      box-shadow: var(--vm-tab-item-active-box-shadow);
      &.vm-modal-tabs-item-dark {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 1),
            rgba(54, 161, 255, 1)
          );
          border-radius: 26px;
          padding: 1px;
          -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          z-index: -1;
        }
      }
    }
  }
}
