@import "~@storefront-ui/shared/styles/helpers";
.sb-footer {
  &__social{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 var(--spacer-xl);
    @include for-desktop {
      padding: 0;
      justify-content: flex-start;
    }
  }
  &__button {
    display: flex;
    justify-content: space-between;
    height: var(--spacer-lg);
    color: var(--c-white);
    img {
      margin: 0 var(--spacer-xs) 0 0;
    }
  }
  &__input {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    width: 480px;
    .sf-input {
      min-height: 32px;
      &__wrapper {
        margin: 0; 
      }
      &__error-message {
        display: none;
      }
    }  
    input {
      width: 242px;
      height: var(--spacer-lg);
      background-color: var(--c-light);
      color: var(--c-secondary-variant);
      font-size: var(--font-size--base);
      border-color: var(--c-light);
    }
    button {
      width: 116px;
      height: var(--spacer-lg);
      font-size: var(--font-size--xs);
      font-weight: var(--font-weight--semibold);
    }
  }
  &__bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 160px;
    width: 100%;
    &-title {
      align-self: flex-start;
      width: auto;
      padding: 0 var(--spacer-base) var(--spacer-base) var(--spacer-base);
    }
    &-social {
      display: flex;
      justify-content: space-around;
      width: 100%;
      margin: 0 0 var(--spacer-lg) 0;
    }
  }
 .sb-social-icon {
   margin: 0 var(--spacer-2xs) 0 0;
   width: 32px;
   height: 32px;
 }
 .sf-footer-column__title {
   height: 52px;
 }
}