const styles = "@layer base, reset, transitional-styles;\n\n@layer transitional-styles {\n  @layer _base, _overrides;\n\n  @layer _base {\n    :host {\n      background-color: #fff;\n      border: 1px solid #333;\n      border-radius: 4px;\n      box-sizing: border-box;\n      contain: layout;\n      display: inline-flex;\n      height: 3rem;\n      max-width: 100%;\n      overflow: hidden;\n    }\n\n    :host([size='small']) {\n      height: 2.5rem;\n    }\n\n    #track {\n      box-sizing: border-box;\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 1;\n      scroll-snap-type: inline mandatory;\n      overscroll-behavior-x: contain;\n      scroll-behavior: smooth;\n      overflow-x: scroll;\n      position: relative;\n      width: 100%;\n      scrollbar-width: none;\n    }\n\n    #track::-webkit-scrollbar {\n      display: none;\n    }\n\n    #btn-prev,\n    #btn-next {\n      align-items: center;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      aspect-ratio: 1;\n      background-color: #fff;\n      border-width: 0;\n      color: #333;\n      cursor: pointer;\n      display: flex;\n      font-size: 1rem;\n      height: 100%;\n      justify-content: center;\n      width: 2.5rem;\n      z-index: 2;\n      position: absolute;\n      transition: 0.2s;\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: var(--grey-400);\n        }\n      }\n    }\n\n    #btn-prev {\n      border-right: 1px solid #333;\n    }\n    #btn-next {\n      border-left: 1px solid #333;\n      right: 0;\n    }\n\n    #btn-prev[aria-hidden='true'],\n    #btn-next[aria-hidden='true'] {\n      opacity: 0;\n      width: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    :host([size='small']) #btn-prev,\n    :host([size='small']) #btn-next {\n      width: 2rem;\n    }\n\n    ::slotted(*) {\n      flex-grow: 1;\n      flex-shrink: 0;\n      z-index: 1;\n      scroll-margin: 0 2.5rem;\n      scroll-snap-align: start;\n    }\n\n    #indicator {\n      display: none;\n    }\n  }\n\n  /* @layer _overrides {\n  } */\n}\n";
export default styles;