/**
 * Share buttons
 */

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .list-style-item {
    margin-right: 0;
  }

  .share-label {
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    margin: 0;
  }

  a {
    border: 2px solid transparent;
    background: var(--button-background);
    border-radius: var(--border-radius-xxxl);
    color: var(--button-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    text-decoration: none;
    transition: var(--transition);

    &:hover,
    &:focus {
      background: var(--button-background-hover);
      border-color: var(--button-background-hover);
      color: var(--button-color-hover);

      .icon svg {
        fill: var(--button-color-hover);
      }
    }
  }

  .icon svg {
    fill: var(--button-color);
    width: 16px;
  }

  .share-facebook svg {
    width: 10px;
  }

  .share-os a {
    cursor: pointer;
  }
}