.dry-toggle {
  display: flex;
  // width: 344px;
  align-items: flex-start;
  gap: 8px;

  &-on {
    display: flex;
    width: 36px;
    height: 20px;
    padding: 2px;
    justify-content: flex-end;
    align-items: center;
    border-radius: 12px;
    background: var(--primary-600, #7f56d9);
    &:hover {
      cursor: pointer;
    }
  }
  &-off {
    display: flex;
    width: 36px;
    height: 20px;
    padding: 2px;
    align-items: center;
    border-radius: 12px;
    background: var(--gray-100, #f2f4f7);
    &:hover {
      cursor: pointer;
    }
  }
  &-md {
    display: flex;
    width: 44px;
    height: 24px;
    padding: 2px;
    align-items: center;
  }
  &-sm {
    align-items: center;
  }
  &-button {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-items: center;
    fill: var(--base-white, #fff);
    filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06))
      drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
    &-md {
      width: 20px;
      height: 20px;
    }
    &:hover {
      cursor: pointer;
    }
  }
  &-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    &-supporting {
      // align-self: stretch;
      color: var(--gray-600, #475467);
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 142.857% */
      &-md {
        font-size: 16px;
        line-height: 24px; /* 150% */
      }
    }
    &-title {
      align-self: stretch;
      color: var(--gray-700, #344054);
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px; /* 142.857% */
      &-md {
        font-size: 16px;
        line-height: 24px; /* 150% */
      }
    }
  }
  &-container {
    display: flex;
    width: fit-content;
    align-items: flex-start;
    gap: 8px;
  }
}