@use 'sass:color';

// Name:            Social share
// Description:     Social share widget for items
//
// Component:       `c-share`
//
// Dependencies:    `settings/v7/colors.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;

@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;

@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================

$share-item-rounded: 50%;
$share-item-size: 2.5rem;

$shares: ( // 
  facebook:  #3b5998,
  twitter: #000,
  whatsapp: #25d366,
  email: $ui-06
);

// Styles
// ========================================================================

.c-share {
  &__item {
    width: $share-item-size;
    height: $share-item-size;
    border-radius: $share-item-rounded;
    @each $social, $color in $shares {
      &--#{$social} {
        background-color: $color;
  
        &:hover {
          background-color: color.adjust($color, $lightness: 5%);
        }
      }
    }
  }
}