// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/variables';
@import 'src/styles/themes';
@import 'src/styles/mixins';

.radio-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  @include rem-fallback(height, $input-height);
  @include rem-fallback(line-height, $input-height);

  + .radio-container { @include rem-fallback(margin-top, 12px); }

  .radio-input-container {
    @include rem-fallback(margin-left, 16px);
    @include rem-fallback(margin-bottom, $gutter-xsmall); // to align with form-group-label

    > input[type=radio] { display: none; }

    .radio-icon {
      cursor: pointer;
      @include square-px-rem(16px);

      svg {
        overflow: visible; // Visible to avoid clipping the edges of the circle
        @include square-px-rem(16px);
        // Add 1px of padding to make sure the circle isn't clipped
        @include rem-fallback(padding, 1px);
      }

      &.disabled { cursor: auto; }
    }

    @include themify($themes) {
      .radio-icon {
        // Apply special styles to the radio button svg
        svg {
          .outer-border {
            stroke: themed('colorInputBorderColor');
            fill: none;
          }

          .inner-circle { fill: none; }
        }

        &.disabled svg {
          .inner-circle,
          .outer-border {
            stroke: themed('colorInputBorderColor') !important; /* Important to override hover */
            fill: themed('colorInputBorderColor') !important;
          }
        }
      }

      // Show the center circle when checked
      > input[type=radio]:checked + .radio-icon svg .inner-circle
      { fill: themed('colorSelectedRadioBtnCenter'); }

      // Highlight the radio circle border on hover when not checked
      > input[type=radio]:not(:checked) + .radio-icon:hover svg .outer-border
      { stroke: themed('colorInputBorderHoverColor'); }

    }
  }

  .input-contents {
    display: flex;
    flex-flow: column nowrap;
    flex-grow: 1;
    @include rem-fallback(margin-left, 10px);

    > .form-group-label {
      @include rem-font-size(14px);
      // If there is div content after the label, adding some padding above it
      + div { @include rem-fallback(margin-top, 12px); }

      @include themify($themes) {
        color: themed('colorContentText');
      }
    }

    > input[type=text],
    > input[type=number],
    > input[type=password],
    > textarea { @include rem-font-size(14px); }
  }
}
