// Include the variables. @import “../../utility/variables/*”;

fieldset.ux-radio-grp {

width:                              40%; 
min-width:                          20em; 
    .ux-radio  {   // provides for custom radio element, instead of native
            display:                        block;
            margin-bottom:          1em;
            position:                       relative;
            padding-left:           1.8em;
            text-indent:            -1.4em;
            font-family:            $font-family-default;
            font-weight:            300;
            font-size:                      1em;
            margin-top:             -1px;
            min-height:             1.13em;
            text-align:             left;

            > input {
                    margin-right:   0.8em;
            }

            > label::before {
                    opacity:                0;
                    cursor:                 pointer;
                    position:               absolute;
                    content:                '';
                    width:                  1em;
                    height:                 1em;
                    left:                   0;
                    top:                    0;
                    background:     #fbfaf9;
                    box-shadow:     inset 0px 0px 2px 0px $color-separator-line;
                    border:                 1px solid $color-separator-line;
                    border-radius:  49%;
            }
            &::hover > label::before   {
                    box-shadow:     0 0 0 4px #fff inset;
                    background:     $color-separator-line;
            }

    }

}

/* Temporary mock up – Needs to be setup properly */

       ul.ux-button-group.round.toggle  {
               margin-left: auto;
               margin-right: auto;

               > * > .button {
                       -webkit-border-radius:  0;
                               border-radius:  0;
                       padding:                                6px  22.5px;
                       border:                                 #eee thin solid;
                       box-shadow:                     0 2px 0 0 #e6e6e6;
               }

               > *:first-child > .button {
                       -webkit-border-bottom-left-radius: 5px;
                       -webkit-border-top-left-radius:    5px;
                               border-bottom-left-radius: 5px;
                               border-top-left-radius:    5px;
               }

               > *:last-child > .button {
                       -webkit-border-bottom-right-radius: 5px;
                       -webkit-border-top-right-radius:    5px;
                               border-bottom-right-radius: 5px;
                               border-top-right-radius:    5px;
               }

               li   {
                       list-style:             none;
                       display:                inline-block;
                       text-indent:            -5px;
                       margin:                         0;
                       padding:                        0;
               }
               input[data-toggle] {
                 display:                              none;
               }

               input[data-toggle]:checked + label,
               input[data-toggle]:checked + label:active {
                 background-color:     $color-selected-state;
                 box-shadow:                   0 2px 4px rgba(0, 0, 0, 0.15) inset, 
                                               0 1px 2px rgba(0, 0, 0, 0.05);
               }

               .button-group.toggle {
                 li:not(first-child) {
                   margin: 0 -0.9rem;
                 }
               }
       }

       /**
* Button elements and elements that have the "button" class are styled.
* Possible additional classes to change the color:
*     - clr-primary
*     - clr-error
*     - clr-success
*/

$button-shadow-height: 3px;

button, .ux-button {

padding:                rem(0.8) rem(1.5);
outline:                none;
border-radius:  3px;
font-family:    $font-family-default;
font-weight:    400;
font-size:              rem(0.8);
text-transform: uppercase;
cursor:                 pointer;

@include button-color($color-button-default);

&.ux-primary {
        @include button-color($color-button-primary);
}
&.ux-info {
        @include button-color($color-info);
}
&.ux-warn {
        @include button-color($color-warn);
}

&.ux-error {
        @include button-color($color-error);
}

&.ux-success {
        @include button-color($color-success);
}

&:active:not(.disabled) {
        position:       relative;
        top:            $button-shadow-height;
        box-shadow: none;
}

&:disabled, &.disabled {
        opacity:        0.4;
        cursor:         default;
}

}