/* Frontend CSS for displaying shopgroup's */

/*
<ul class="shop-group-list">
  <li class="shop-group-icon mode">
    <a title="Mode" href="https://www.save-up.at/k/mode/">
      <img src="https://www.save-up.at/wp-content/uploads/2015/12/mode.svg" alt="" />
      <p>Mode</p>
    </a>
  </li>
*/

ul.shop-group-list {
}

ul.shop-group-list > li {
  list-style-type: none;
  margin: 0;

  text-align: center;
  display: inline-block;
  vertical-align: top;
}

ul.shop-group-list a {
  display: inline-block;
}

ul.shop-group-list p {
    margin: 0.5em 0 0 0;
    line-height: normal;
}

/* move this to theme */

ul.shop-group-list > li {
  width: 120px;
  height: 120px;
}

ul.shop-group-list p {

  /* font: normal 1em 'Ropa Sans', 'Source Sans Pro', 'Ubuntu', 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; */
  text-transform: uppercase;

  font-size: 0.9em;

  padding: 0 1px 0 1px;  /* spacing */

  /**
   * hyphenation is not easy
   * @see: https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
   * @see: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
   *
   **/

    overflow-wrap: break-word; /* technically the same, but use both */
        word-wrap: break-word;

   -ms-word-break: break-all;  /* old-IE support, but words are broken up letter-by-letter */
       word-break: break-all;
       word-break: break-word; /* Non standard for webkit */

  -webkit-hyphens: auto; /* adds a hyphen where the word breaks, if supported */
     -moz-hyphens: auto;
      -ms-hyphens: auto; 
          hyphens: auto;
}