.SubscriptionButton {
  width: 100%; // as per your dropdown's button width
  display: inline-block; // to make it sit alongside other elements

  &--follow {
    .Button--color(#de8e00, #fff2ae);
  }

  &--lurk {
    color: #de8e00;
    background: #fff2ae;
  }

  // ... any other subscription state styles similar to the dropdown
}

// Existing media query for mobile
@media @phone {
  // New media query styles for SubscriptionStateButton
  .IndexPage-nav .SubscriptionButton {
    background: transparent;
    width: auto;
    height: var(--header-height-phone, 46px);
    right: 50px;

    .Button-icon {
      font-size: 20px;
      margin-right: 0;
    }

    .Button-label {
      display: none;
    }
  }
}

// Fix css for 1.0 Tooltip update
.ButtonGroup .Button + .tooltip + .Button {
  margin-left: 1px;
}

@primary-btn-bg: @primary-color;
@primary-btn-text: @body-bg-light;
@secondary-btn-bg: @control-bg;
@secondary-btn-text: @text-color;

// Subscription Modal
.SubscriptionModal {
  .Modal-body {
    color: @text-color;
  }

  .Button.Button--primary {
    background-color: @primary-btn-bg;
    color: @primary-btn-text;
  }

  .Form-group {
    margin-bottom: 20px;
  }
}

// Subscription Options List
.SubscriptionOptionsList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.SubscriptionOption {
  padding: 10px;
  border: 1px solid @muted-color;
  border-radius: @border-radius;
  background-color: @body-bg;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px; // Added margin for spacing between each item

  &:last-child {
    margin-bottom: 0; // Ensure the last item doesn't have extra margin
  }

  &:hover {
    background-color: darken(@secondary-btn-bg, 10%);
  }

  &.selected {
    background-color: var(--following-bg);
    color: var(--following-color);

    .SubscriptionOption-icon {
      color: var(--following-color);
    }

    .SubscriptionOption-title {
      color: var(--following-color);
    }

    .SubscriptionOption-description {
      color: var(--following-color);
    }
  }

  .SubscriptionOption-icon {
    flex-shrink: 0;
    font-size: 1.2em; // Increase the size of the icon
  }

  .SubscriptionOption-title {
    font-weight: bold; // Making the title bold
    flex: 0 0 100px; // Assuming a width of 150px for the title, you can adjust this as per your design
  }

  .SubscriptionOption-description {
    flex-grow: 1; // This will make the description take up the remaining width
    padding-left: 10px; // Some spacing between the title and the description
  }

  .SubscriptionOption-selectedIcon {
    margin-left: auto; // This will push the check icon to the right side
    color: @alert-success-color;
    padding-left: 10px; // Some spacing between the description and the check icon
  }
}

@media @tablet-up {
  .Hero.FollowingHero {
      .container {
          padding-bottom: 40px;
      }
  }
}
