.hide {
  display: none;
}


.show {
  display: block;
}

:root {
  --gutefy-icon-wrapper-color: #000000; // used for icon wrapper color
  --gutefy-icon-color: white; // used for icon color
  --gutefy-icon-wrapper-gap: 0px;
  --gutefy-icon-wrapper-size: 44px;
  --gutefy-icon-wrapper-display-postion-left: 100%;
  --gutefy-icon-wrapper-z-index: 9999999999;
  --gutefy-icon-wrapper-position-top: 44%;
  --gutefy-icon-wrapper-position-right: 0%;
  --gutefy-icon-wrapper-position-left: auto;
}

#gf_social_icons__wrapper {
  position: fixed;
  top: var(--gutefy-icon-wrapper-position-top);
  bottom: var(--gutefy-icon-wrapper-position-bottom);
  display: grid;
  z-index: var(--gutefy-icon-wrapper-z-index);

  &.position--right{
    right: 0;
    left: auto;
  }
  &.position--left{
    right: auto;
    left: 0;

    .customize-partial-edit-shortcut {
      position: absolute;
      /* width: 1px; */
      /* height: 1px; */
      padding: 0;
      margin: -1px -0px 0 0px;
      border: 0;
      background: transparent;
      color: transparent;
      box-shadow: none;
      outline: none;
      z-index: 5;
      right: -33px;
      left: auto;
  }
  
  }


  .gf_social_icons_social_float {
    
    display: grid;
    gap: var(--gutefy-icon-wrapper-gap);

    .empty-sms {
      background-color: red;
      color: white;
      padding: 5px;
      text-transform: uppercase;
      font-family: inherit;
      font-weight: 500;
      letter-spacing: 1px;
      font-size: 11px;
    }



    a.gf_social_icons_social_icon {

      z-index: var(--gutefy-icon-wrapper-z-index);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      text-align: center;
      width: 44px;
      background-color: var(--gutefy-icon-wrapper-color);
      aspect-ratio: 1;
      // transition: all 0.3s ease; /* Apply transition to all properties */

      & * {
        transition: all 0.1s ease;
        /* Apply transition to all properties */
      }

      span {
        display: flex;

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


      }

    }
  }
}