@vendasta/store/products-nav/products-nav.component.css

Components and data for Store

nav { position: relative; width: 350px; margin: 0 auto; background: #ffffff; border: 1px solid #e0e0e0; border-width: 1px 0; overflow: hidden; }
nav ul { display: flex; flex-wrap: nowrap; list-style: none; margin: 0 50px; padding: 0; position: relative; left: 0; transition: 0.3s left ease; word-break: break-word; }
nav li { min-width: 100%; flex: 1 0 25%; text-align: center; font-size: 14px; }
nav li:first-child a { border-right: 1px solid #e0e0e0; }
nav a { position: relative; display: block; height: 100%; padding: 20px; text-decoration: none; color: #212121; transition: 0.3s background; align-items: center; border-right: 1px solid #e0e0e0; cursor: pointer; }
nav a:hover { background-color: rgba(255, 255, 255, 0.6); }
nav a.active { background-color: #ffffff; }
nav a.active:after { content: ''; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: #ffffff; }
nav p { margin-bottom: 0; }
nav .icon img { width: 80px; min-width: 80px; height: 80px; }
nav .prev, nav .next { position: absolute; height: 100%; width: 50px; top: 0; background: rgba(33, 33, 33, 0.1); cursor: pointer; text-align: center; opacity: 1; transition: 0.3s opacity ease; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; }
nav .prev:not(.disabled):hover, nav .next:not(.disabled):hover { background: rgba(33, 33, 33, 0.3); }
nav .prev { left: 0; }
nav .next { right: 0; }
nav .disabled { cursor: default; opacity: 0; }
@media screen and (min-width: 600px) { nav { width: auto; overflow: initial; }
  nav li { min-width: 0; width: 25%; flex-grow: 0; } }
@media screen and (min-width: 600px) { nav .hide-arrows { display: none; }
  nav .hide-arrows + .slides { margin: 0; } }

va-icon { display: inline-block; }

.item-amount { color: #9e9e9e; font-size: 14px; text-align: right; margin: 0 24px 8px; }

.wrapper { overflow: hidden; }

.requires-text { color: #9e9e9e; }

.icon-area { position: relative; display: inline-block; }

.addon-indicator { position: absolute; border: 2px solid #ffffff; border-radius: 50%; bottom: -2px; right: -2px; }