.button-component 
  width: 100%
  .button-component-box
    .button-container
      padding: 0px;
      width: 100%;
      height: 100%;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      gap: 5px;
      border: none;
      a.button-anchor
        font-size: 1rem;
        height: 100%;
        width: 100%;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        color: rgb(87, 84, 74);
        align-items: flex-start;
        background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 100%);
        background-size: 200%;
        transition: all 0.2s linear 0s;
        z-index: 2;
        &:hover
          background-position: -100% center;
          color: rgb(180, 175, 154);

        // line over the button
        &::before
          background-color: rgb(87, 84, 74);
          transition: all 0.2s ease 0s;
        &:hover::before
          height: 2px;
          z-index: -1;
          width: 100%;
          content: "";
          transform: translate(0px, -8px);
          pointer-events: none;
        
        // line under the button
        &::after
          background-color: rgb(87, 84, 74);
          transition: all 0.2s ease 0s;
        &:hover::after
          height: 2px;
          z-index: -1;
          width: 100%;
          content: "";
          transform: translate(0px, 8px);
          pointer-events: none;

        .button-anchor-box
          padding: 10px;
          display: flex;
          flex-direction: row;
          gap: 10px;
          -webkit-box-align: center;
          align-items: center;
          color: inherit;
          font-family: Manrope, sans-serif;
          font-weight: 500;
          font-size: 18px;
          .button-item-icon
            width: 5%;
            height: 5%;
            min-width: 20px;
            min-height: 20px;
            background-image: linear-gradient(90deg, rgb(87, 84, 74) 50%, rgb(87, 84, 74) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%);
            background-size: 200%;
            transition: all 0.1s linear 0s;
        &:hover .button-anchor-box .button-item-icon
            background-position: -100% center;