@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.AllBlogPosts {
  background-color: #ecf4f3;
  .BlogSearchBar {
    form {
      input {
        font-size: $fs16;
        line-height: 24px;
        &::placeholder {
          color: $secondaryColor;
        }
        &:focus {
          &::placeholder {
            opacity: 0.7;
          }
        }
      }
      .SearchBtn {
        transition: 0.3s all;
        background-color: $primaryColor;
        .SearchIcon {
          mask-size: contain;
          -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
          background-color: $whiteColor;
          mask-image: url("../../../../../public/images/search-icon.svg");
          -webkit-mask-image: url("../../../../../public/images/search-icon.svg");
        }
        &:hover {
          background-color: $hoverPrimaryBgColor;
        }
      }
    }
  }
}