/**
 * CM Social Widget module
 * PrestaShop 1.7.x & 8.x
 * CSS
 * Front-office - "Detached icons" style
 *
 * Loaded on top of front-left.css / front-right.css. The icons keep their
 * colours and sprite, but they do not slide a label out on hover any more:
 * they stand on their own, one below the other, inset from the window edge.
 */

/* Away from the window edge, on whichever side the widget is placed. */
#social-widget.sw-detached {
  left: auto;
  right: auto;
}
#social-widget.sw-detached.sw-left {
  left: 15px;
}
#social-widget.sw-detached.sw-right {
  right: 15px;
}

/* Separate buttons instead of a single strip glued to the edge. */
#social-widget.sw-detached li {
  margin-bottom: 10px;
}
#social-widget.sw-detached li:last-child {
  margin-bottom: 0;
}
#social-widget.sw-detached a,
#social-widget.sw-detached a:hover {
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#social-widget.sw-detached a:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

/*
 * No sliding label. The text stays in the markup - it is the only accessible
 * name of the link - it is just taken out of the visual flow.
 */
#social-widget.sw-detached a span,
#social-widget.sw-detached a:hover span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  left: auto;
  right: auto;
  transition: none;
}

/* EOF */