@import "../../core/style/variables";
@import "../../core/style/shadows";

// TODO(jelbourn): This goes away.
@import "../../core/style/default-theme";

$radio-width: 16px !default;
$radio-height: $radio-width !default;

md-radio-button {
  display: block;
  margin: 15px;
  white-space: nowrap;
  cursor: pointer;
}

md-radio-group {
  border: 1px dotted transparent;
  display: inline-block;
  outline: none;
}

.md-radio-container {
  box-sizing: border-box;
  position: relative;
  top: 4px;
  display: inline-block;
  width: $radio-width;
  height: $radio-width;
  cursor: pointer;
}

.md-radio-off {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: $radio-width;
  height: $radio-width;
  border: solid 2px;
  border-radius: 50%;
  transition: border-color ease 0.28s;
}

.md-radio-on {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: $radio-width;
  height: $radio-width;
  border-radius: 50%;
  transition: transform ease 0.28s;
  transform: scale(0);

  .md-radio-checked & {
    transform: scale(0.55);
  }
}

// This is the style applied to the content (included via <content>). If we could rely on shadow
// DOM always being present, this would use the ::content psuedo-class.
.md-radio-label {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  vertical-align: middle;
  white-space: normal;
  //  pointer-events: none;  ???
  width: auto;
}

.md-radio-root {
  display: block;
  cursor: pointer;
}


// THEME

.md-radio-off {
  border-color: md-color($md-foreground, icon);
}

.md-radio-on {
  background-color: md-color($md-accent, 0.87);
}

.md-radio-checked .md-radio-off {
  border-color: md-color($md-accent, 0.87);
}

// TODO
.md-radio-checked .md-ink-ripple { }
.md-radio-container .md-ripple { }
p

md-radio-group:not([disabled]) md-radio:not([disabled]) {

  &.md-primary {
    .md-radio-on {
      background-color: md-color($md-primary, 0.87);
    }

    &.md-radio-checked .md-radio-off {
      border-color: md-color($md-primary, 0.87);
    }

    &.md-radio-checked .md-ink-ripple {
      color: md-color($md-primary, 0.87);
    }

    .md-radio-container .md-ripple {
      color: md-color($md-primary, 600);
    }
  }

  &.md-warn {
    .md-radio-on {
      background-color: md-color($md-warn, 0.87);
    }
    &.md-radio-checked .md-radio-off {
      border-color: md-color($md-warn, 0.87);
    }
    &.md-radio-checked .md-ink-ripple {
      color: md-color($md-warn, 0.87);
    }
    .md-radio-container .md-ripple {
      color: md-color($md-warn, 600);
    }
  }
}

md-radio-button[disabled],
md-radio-group[disabled] md-radio-button {
  .md-radio-container .md-radio-off,
  .md-radio-container .md-radio-on {
    border-color: md-color($md-foreground, disabled);
  }
}