// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Radio should render correctly 1`] = `
"<div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option</span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div>"
`;

exports[`Radio should support react-node in description 1`] = `
"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option</span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option 1</span><span class=\\"\\">Description for Option1<style>
        span {
          color: #999;
          font-size: calc(var(--radio-size) * 0.85);
          padding-left: calc(var(--radio-size) + var(--radio-size) * 0.375);
        }
      </style></span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option 1</span><span class=\\"\\"><b>Description</b> for Option1<style>
        span {
          color: #999;
          font-size: calc(var(--radio-size) * 0.85);
          padding-left: calc(var(--radio-size) + var(--radio-size) * 0.375);
        }
      </style></span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div></div>"
`;

exports[`Radio should work correctly with different sizes 1`] = `
"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>mini</span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 12px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>small</span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 14px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>medium</span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>large</span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 18px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div></div>"
`;

exports[`Radio should work with different status 1`] = `
"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span></span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #000;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #eaeaea;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #000;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span></span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #0070f3;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #0070f3;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #0070f3;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span></span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #f5a623;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #f5a623;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #f5a623;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span></span></label><style>
        input {
          opacity: 0;
          visibility: hidden;
          overflow: hidden;
          width: 1px;
          height: 1px;
          top: -1000px;
          right: -1000px;
          position: fixed;
        }

        .radio {
          display: flex;
          width: initial;
          align-items: flex-start;
          position: relative;
          --radio-size: 16px;
        }

        label {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          color: #e00;
          cursor: pointer;
        }

        .name {
          font-size: var(--radio-size);
          font-weight: bold;
          user-select: none;
          display: inline-flex;
          align-items: center;
        }

        .point {
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          border: 1px solid #e00;
          transition: all 0.2s ease 0s;
          position: relative;
          display: inline-block;
          transform: scale(0.875);
          margin-right: calc(var(--radio-size) * 0.375);
        }

        .point:before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          transform: scale(0);
          height: var(--radio-size);
          width: var(--radio-size);
          border-radius: 50%;
          background-color: #e00;
        }

        .point.active:before {
          transform: scale(0.875);
          transition: all 0.2s ease 0s;
        }
      </style></div></div>"
`;
