@use "../custom" as *;

.btn{
  &-query{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    height: 2.6875rem;
    color: $white !important;
    font-size: 0.88rem;
    font-weight: 500;
    background-color: rgba($gray, 0.15) !important;
    border-radius: 0.62rem;

    &:hover{
      background-color: rgba($gray, 0.20) !important;
    }
  }

  &-favorite{
    border: none;
    outline: none;
    min-width: 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.9375rem;
    background-color: rgba($instagram, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    &:hover{
      background-color: rgba($instagram, 0.4);
    }

    svg{
      width: 1.1875rem;
      height: 1.0625rem;
      object-fit: contain;
      object-position: center;

      path{
        fill: $instagram;
      }
    }

    &.active{
      background-color: $instagram;

      svg path{
        fill: rgba($white, 0.8) !important;
      }
    }
  }
}