@import 'variables';
@import 'mixins';

.sidebar-additional {
  .widget {
    .widget-suggested-follows-container {
      h4 {
        margin: 0;
      }
      .widget-body {
        .widget-list-item__suggestions {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          & + .widget-list-item__suggestions {
            @include themeable(
              border-top,
              theme-border,
              1px solid $light-medium-gray
            );
            padding-top: 8px;
          }

          .widget-list-item__avatar {
            width: 48px;
            height: 48px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 100%;
            }
          }

          .widget-list-item__content {
            flex: 1 auto;
            padding-left: 8px;
            h5 {
              all: unset;
              display: block;
              margin-bottom: 4px;

              a {
                @include themeable(color, theme-color, rgba($black, 0.8));

                &:hover {
                  color: var(--body-color);
                }
              }
            }

            img {
              width: 48px;
              height: 48px;
              border-radius: 50%;
              position: absolute;
              top: unset;
              left: 15px;
            }
            .widget-list-item__follow-button {
              border: 2px solid transparent;
              border-radius: 3px;
              padding: 2px 8px;
              text-align: center;
              background-color: $green;
              color: $black;
              font-family: $helvetica-condensed;
              font-weight: 900;
              font-size: 0.8em;
            }
          }
        }
      }
    }
    .widget-image {
      margin: auto -16px; // offset the padding of the widget for img full width.
    }

    .widget-button {
      display: block;
      text-align: center;
      padding: 8px 16px;
      margin: auto -16px;
      border-radius: 3px;
    }

    .write {
      margin: 8px -16px;
      background: var(--button-primary-bg);
      color: var(--button-primary-color);
    }

    .all-stories {
      @include themeable(border, theme-border, 2px solid $outline-color);
      color: var(--body-color);
      background: var(--base-inverted);
    }
  }
}
