/// radio-select.less -- Ethlance component for making radio selection


@checkbox-background-color: #color[offwhite3];
@checkbox-foreground-color: #color[dark-blue];


.ethlance-radio-select {
  display: flex;
  flex-direction: column;

  > .ethlance-radio-element {
    #mixin.noselect();
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.7em 1.0em;
    color: white;
    cursor: pointer;
    transition: all 0.1;

    > .ethlance-inline-svg {
      margin-right: 0.5em;

      #outer-circle {
	stroke: @checkbox-background-color !important;
      }

      #inner-circle {
	fill: transparent !important;
      }
    }

    > .label {
      font-weight: 300;
    }

    &:hover {
      > .label {
        text-decoration: underline;
      }
    }

    &.active {
      > .ethlance-inline-svg {
        margin-right: 0.5em;
        
        #outer-circle {
	  stroke: fadeout(white, 25%) !important;
        }
        
        #inner-circle {
	  fill: white !important;
        }
      }
      
      > .label {
        font-weight: 500;
      }
    }
  }

  /* make the radio select more flexible */
  &.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    > .ethlance-radio-element {
      flex-wrap: wrap;
    }
  }
}


.radio-secondary-element {
  display: flex;
  flex-direction: row;
  align-items: center;

  > .ethlance-inline-svg {
    margin-right: 0.5em;

    #outer-circle {
      stroke: @checkbox-background-color !important;
      fill: @checkbox-background-color !important;
    }

    #inner-circle {
      fill: @checkbox-background-color !important;
    }
  }

  > .label {
    color: #color[dark-blue];
    font-weight: 300;
  }

  &:hover {
    > .label {
      color: fadein(#color[dark-blue], 25%);
    }
  }
}


// Hacky way to get active element to get selected correctly
.ethlance-radio-element.active > .radio-secondary-element {
  > .ethlance-inline-svg {

    margin-right: 0.5em;
    
    #outer-circle {
      stroke: @checkbox-background-color !important;
    }
    
    #inner-circle {
      fill: @checkbox-foreground-color !important;
    }
  }
  
  > .label {
    color: #color[dark-blue];
  }
}
