hugo-theme-zzo/assets/sass/layout/_footer.scss

.footer {
  padding: 0 0.5rem;
  position: relative;

  @include themify($themes) {
    color: themed('footer-color');
    background-color: themed('footer-background-color');
  }

  &__wrapper {
    @include flexbox();        
    @include flex-direction(row);
    @include respond-to(sm) {
      @include flex-direction(column);
    }
  }

  &__feed {
    padding: 0.5rem 0;
    @include flex-grow(1);
    @include flexbox();
    @include align-items(center);
    @include flex-direction(column);
  }

  &__social {
    padding: 0.5rem 0;
    @include flex-grow(1);
    @include flexbox();
    @include align-items(center);
    @include flex-direction(column);
  }

  &__poweredby {
    @include flexbox();
    @include align-items(center);
    @include flex-direction(column);
    padding: 0.5rem 0;

    p {
      padding: 0.125rem;
    }
  }

  .dropdown {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;

    @include flexbox();
    @include align-items(center);
    @include justify-content(center);    
    @include themify($themes) {
      color: themed('gtt-color'); 
      background-color: themed('gtt-background-color');
      @include on-event {
        color: themed('gtt-hover-color');  
        background-color: themed('gtt-hover-background-color');
      }
    }

    &-trigger {
      border-radius: 50%;
      cursor: pointer;
      border: none;
      width: 100%;
      height: 100%;
      color: inherit;
      background-color: inherit;
    }

    &-content {
      position: absolute;
      bottom: 100%;
      left: 0;
      display: none;
      height: auto;
      z-index: z("dropdown");      
      border-top-left-radius: 0.15rem;
      border-top-right-radius: 0.15rem;

      a {
        font-size: 0.9rem;
      }

      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
      @include themify($themes) {
        border-bottom: 4px solid themed("dropdown-border-top-color");
        background-color: themed("dropdown-content-background-color");
      }

      .is-active {
        @include themify($themes) {
          background-color: themed("dropdown-item-active-background-color");
        }
      }
    }

    &-item {
      padding: 0.25rem 0.75rem;
      height: 100%;
      text-decoration: none;
      display: block;
      font-size: 1rem;

      @include themify($themes) {
        color: themed("dropdown-item-color");
        @include on-event {
          color: themed("dropdown-item-hover-color");
          background-color: themed("dropdown-item-hover-background-color");
          text-decoration: none;

          &:first-child {
            border-top-left-radius: 0.15rem;
            border-top-right-radius: 0.15rem;
          }
        }
      }
    }
  }

  .label {
    margin: 0.25rem;
  }

  .content {
    font-family: $footer_content_font;
  }

  .select-theme {    
    &__label {      
      color: inherit;
      text-transform: capitalize;            
    }

    &__item {
      text-transform: capitalize;
    }
  }

  .select-lang {
    &__label {
      color: inherit;
      text-transform: capitalize;
    }
  }

  .feed {
  }

  .social {
    margin: 0.25rem;
    a {
      @include themify($themes) {        
        text-decoration: none;
        color: themed('social-icon-color');
        &:hover {
          color: themed('social-icon-hover-color');
          transition: color 0.2s ease;
        }        
      }   
    }
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  hr {
    @include themify($themes) {
      border-top: 1px solid themed('hr-color') !important;
    }
  }
}