// 基本
@margin-form: 30px;
@fontsize-text: 16px;
@color-text: #333333;

// タイトル
@fontsize-title: 24px;
@color-title: #333333;

// ラベル
@fontsize-label: 14px;
@color-label: #333333;

// 入力フォーム
@fontsize-form: 16px;
@color-form: #c1dfe9;
@color-form-border: #c1dfe9;
@input-lineheight-computed: floor(@fontsize-form * @line-height-base);

// ボタン
@fontsize-button: 24px;
@color-button: #3aaaff;
@color-btn-text: #000000;
@color-btn-border: #3aaaff;

// プレビュー背景
@color-bg: #FFFFFF;

// bootstrap
@import "../../templates/pop/variables.less";
@import "../../templates/pop/mixins/vendor-prefixes.less";

//
// Scaffolding
// --------------------------------------------------
body {
  font-size: @font-size-base;
  color: @text-color;
  background-color: @body-bg;
}
a {
  color: @link-color;
  &:hover,
  &:focus {
    color: @link-hover-color;
  }
  &:not(.btn) {
    text-decoration: underline;
  }
}
hr {
  border-color: @hr-border;
}

//
// Typography
// --------------------------------------------------
h1 {
  font-size: @fontsize-title;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: @headings-color;
  small,
  .small {
    color: @headings-small-color;
  }
}
.text-muted {
  color: @text-muted;
}

.text-emphasis-variant(@color) {
  color: @color;
  a&:hover,
  a&:focus {
    color: darken(@color, 10%);
  }
}
.text-primary {
  .text-emphasis-variant(@brand-primary);
}
.text-success {
  .text-emphasis-variant(@state-success-text);
}
.text-info {
  .text-emphasis-variant(@state-info-text);
}
.text-warning {
  .text-emphasis-variant(@state-warning-text);
}
.text-danger {
  .text-emphasis-variant(@state-danger-text);
}

.bg-variant(@color) {
  background-color: @color;
  a&:hover,
  a&:focus {
    background-color: darken(@color, 10%);
  }
}
.bg-primary {
  .bg-variant(@brand-primary);
}
.bg-success {
  .bg-variant(@state-success-bg);
}
.bg-info {
  .bg-variant(@state-info-bg);
}
.bg-warning {
  .bg-variant(@state-warning-bg);
}
.bg-danger {
  .bg-variant(@state-danger-bg);
}

.page-header {
  border-bottom-style: dotted;
  border-color: @page-header-border-color;
}

blockquote {
  border-color: @blockquote-border-color;
  footer,
  small,
  .small {
    color: @blockquote-small-color;
  }
}
.blockquote-reverse,
blockquote.pull-right {
  border-color: @blockquote-border-color;
}


//
// Forms
// --------------------------------------------------
.sc-group,
.sc-group .form-group:last-child {
  margin-bottom: @margin-form;
}

legend {
  color: @legend-color;
  border-bottom: 1px solid @legend-border-color;
}
label {
  font-weight: normal;
  color: @text-color;
}
output {
  color: @input-color;
}

.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);

  &:focus {
    border-width: 2px;
    border-color: @color;
    box-shadow: none;
  }
}
.form-control {
  height: @input-height-base;
  font-size: @fontsize-form;
  color: @input-color;
}
select.form-control {
  color: @input-color;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: none;

  .form-control-focus();

  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: @input-bg-disabled;
  }
}
.form-control-static {
  min-height: (@line-height-computed + @font-size-base);
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    &.form-control {
      line-height: @input-height-base;
    }
  }
}
.has-feedback {
  .form-control {
    padding-right: (@input-height-base * 1.25);
  }
}
.form-control-feedback {
  width: @input-height-base;
  height: @input-height-base;
  line-height: @input-height-base;
}
.form-horizontal {
  .radio,
  .checkbox {
    min-height: (@line-height-computed + (@padding-base-vertical + 1));
  }
}

.sc-form-label,
.sc-question-title {
  font-size: @fontsize-label;
  color: @color-label;
}
.form-caption {
  font-size: @font-size-base;
}
.help-block {
  margin-bottom: 0;
  color: @text-color;
  font-size: @font-size-small;
}
.sc-group-address .help-block {
  display: inline-block;
}
.sc-group-birthday {
  select#year {
    width: ( @fontsize-form * 4 + @padding-base-horizontal * 2 ) !important;
  }
  select#month {
    width: ( @fontsize-form * 3 + @padding-base-horizontal * 2 ) !important;
  }
  select#date {
    width: ( @fontsize-form * 3 + @padding-base-horizontal * 2 ) !important;
  }
}

//
// Buttons
// --------------------------------------------------
.btn {
  border: 2px solid transparent;
  border-radius: @btn-border-radius-base;

  &:hover,
  &:focus,
  &.focus {
    color: @btn-default-color;
  }
}

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:focus,
  &.focus {
    color: @color;
    background-color: darken(@background, 8%);
        border-color: darken(@border, 10%);
  }
  &:hover {
    color: @color;
    background-color: darken(@background, 8%);
        border-color: darken(@border, 10%);
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @color;
    background-color: darken(@background, 8%);
        border-color: darken(@border, 10%);

    &:hover,
    &:focus,
    &.focus {
      color: @color;
      background-color: darken(@background, 8%);
          border-color: darken(@border, 10%);
    }
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: @background;
          border-color: @border;
    }
  }

  .badge {
    color: @background;
    background-color: @color;
  }
}
.btn-default {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-default {
  &:hover,
  &:focus,
  &.focus {
    background-color: fade(@btn-default-color, 8%);
  }
}
.btn-primary {
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
.btn-success {
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
.btn-info {
  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
.btn-warning {
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
.btn-danger {
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}

.btn-link {
  color: @link-color;

  &:hover,
  &:focus {
    color: @link-hover-color;
  }

  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: @btn-link-disabled-color;
    }
  }
}

.btn-lg {
  padding: (@fontsize-button * .75) @fontsize-button;
  font-size: @fontsize-button;
  border-width: 2px;
  border-radius: @btn-border-radius-large;
}


//
// Modals
// --------------------------------------------------
.modal-content {
  background-color: @modal-content-bg;
  border-color: @modal-content-fallback-border-color;
  border-color: @modal-content-border-color;
  border-radius: @border-radius-base;
}
.modal-header {
  border-color: @modal-header-border-color;
}
.modal-footer {
  border-color:  @modal-footer-border-color;
}
.close {
  color: @close-color;
  text-shadow: @close-text-shadow;
  opacity: .4;

  &:hover,
  &:focus {
    color: @close-color;
    opacity: .7;
  }
}


// --------------------------------------------------
// placeholder

.form-control {
  .placeholder();
}

// --------------------------------------------------
.sc-form-label .glyphicon-asterisk,
.sc-question-title .glyphicon-asterisk {
  color: @brand-danger;
}

// --------------------------------------------------
// チェックボックス・ラジオボタン icheck.js

.icheckbox,
.iradio {
  width: 18px;
  height: 18px;
  border-width: 2px;
  border-color: @text-color;

  &.disabled {
    background-color: @input-bg-disabled;
    border-color: @input-bg-disabled;
  }
  &.checked {
    border-color: contrast(contrast(@text-color), @color-form, @text-color);
  }
}
.icheckbox {
  border-radius: 3px;

  &.checked {
    color: contrast(contrast(@text-color), @color-form, @text-color);
  }
}
.iradio.checked:before {
  background-color: contrast(contrast(@text-color), @color-form, @text-color);
}
.icheckbox.checked:before {
  border-color: contrast(contrast(@text-color), @color-form, @text-color);
}

// --------------------------------------------------
// animation.lessを上書き
// 値をユーザー設定に更新する必要がある項目を上書き
// --------------------------------------------------

// --------------------------------------------------
// アニメーション：フォーム

// アニメーションなし 
.sc-input-field + .sc-input-label {
  height: @input-height-base;
  font-size: @fontsize-form;
  color: @input-color-placeholder;
  background-color: @input-bg;
  border: 1px solid @input-border;
  border-radius: @input-border-radius;
  box-shadow: none;
}
.sc-input-field:disabled + .sc-input-label,
.sc-input-field:readonly + .sc-input-label,
fieldset:disabled .sc-input-field + .sc-input-label {
  background-color: @input-bg-disabled;
  border-color: @input-bg-disabled;
  color: contrast(@input-bg-disabled);
}
.sc-input-field:focus + .sc-input-label {
  border-width: 2px;
  border-color: @input-border-focus;
  box-shadow: none;
}
.sc-group-name {
  .form-horizontal .control-label　{
    @media (min-width: @screen-sm-min) {
      height: @input-height-base;
    }
  }
}
.sc-group-address {
  .form-horizontal .control-label　{
    @media (min-width: @screen-sm-min) {
      height: @input-height-base;
    }
  }
  .col-sm-5 .help-block {
    height: @input-height-base;
  }
  .col-sm-3 .help-block {
    @media (min-width: @screen-sm-min) {
      height: @input-height-base;
    }
  }
}


// ラベルトップ
.sc-anim-labeltop {
  .form-horizontal .form-control-static {
    margin-top: (@input-lineheight-computed + 4);
  }
  .sc-group-name {
    .form-horizontal .form-group:first-child .control-label {
      @media (min-width: @screen-sm-min) {
        margin-top: (@input-lineheight-computed + 4);
      }
    }
    .form-horizontal .form-group:not(:first-child) .control-label {
      margin-top: (@input-lineheight-computed + 4);
    }
  }
}
.sc-each_input.labeltop {
  padding-top: (@input-lineheight-computed + 4);
}
.sc-each_input.labeltop .sc-input-field {
  color: @text-color;
}
.sc-each_input.labeltop .sc-input-label {
  // background-color: fade(@input-bg, 10%);
  top: (@input-lineheight-computed + 4);
  color: fade(@text-color, 70%);
}
.sc-each_input.labeltop .sc-input-label::before,
.sc-each_input.labeltop .sc-input-label::after {
  height: 2px;
  border-radius: 2px;
  background-color: @input-border;
}
.sc-each_input.labeltop .sc-input-field.rubyauto + .sc-input-label .sc-input-label_text,
.sc-each_input.labeltop .sc-input-field:focus + .sc-input-label .sc-input-label_text,
.sc-each_input.labeltop.-hasval .sc-input-field + .sc-input-label .sc-input-label_text {
  transform: translate(0, -(@input-lineheight-computed + 8));
}


// ラインカラー
.sc-anim-linecolor {
  .sc-group-name {
    .form-horizontal .form-group:first-child .control-label {
      @media (min-width: @screen-sm-min) {
        margin-top: (@input-lineheight-computed - @padding-base-vertical);
      }
    }
    .form-horizontal .form-group:not(:first-child) .control-label {
      margin-top: (@input-lineheight-computed - @padding-base-vertical);
    }
  }
}
.sc-each_input.linecolor .sc-input-field {
  padding-top: @input-lineheight-computed;
  height: (@input-height-base - @padding-base-vertical + @input-lineheight-computed);
  color: @text-color;
  .sc-group-address &,
  .radio-inline + &,
  .checkbox-inline + & {
    padding-top: @padding-base-vertical;
    height: @input-height-base;
  }
}
.sc-each_input.linecolor .sc-input-label {
  color: @text-color;
  padding-top: @input-lineheight-computed;
  height: (@input-height-base - @padding-base-vertical + @input-lineheight-computed);
  .sc-group-address &,
  .radio-inline + &,
  .checkbox-inline + & {
    padding-top: @padding-base-vertical;
    height: @input-height-base;
  }
}
.sc-each_input.linecolor .sc-input-label::before {
  border-bottom-color: fade(@text-color, 80%);
}
.sc-each_input.linecolor .sc-input-label::after {
  border-bottom-color: @input-border;
}
.sc-each_input.linecolor .sc-input-field.rubyauto + .sc-input-label .sc-input-label_text,
.sc-each_input.linecolor .sc-input-field:focus + .sc-input-label .sc-input-label_text,
.sc-each_input.linecolor.-hasval .sc-input-field + .sc-input-label .sc-input-label_text {
  top: -@input-lineheight-computed;
}


// フォーカスイン
.sc-each_input.focusin .sc-input-label {
  border-color: @color-form-border;
}
.sc-each_input.focusin .sc-input-label::after {
  box-shadow: 0 0 0 0 @color-form-border;
}
.sc-each_input.focusin .sc-input-field.rubyauto + .sc-input-label,
.sc-each_input.focusin .sc-input-field:focus + .sc-input-label {
  outline-color: fade(@color-form-border, 50%);
}
.sc-each_input.focusin .sc-input-field.rubyauto + .sc-input-label::after,
.sc-each_input.focusin .sc-input-field:focus + .sc-input-label::after {
  box-shadow: 0 2px 24px -8px @color-form-border;
}


// --------------------------------------------------
// アニメーション：ボタン

// スプレッド
.btn-default.btn-anim.spread::before {
  background-color: transparent;
}
.btn-default.btn-anim.spread::after {
  background-color: fade(@btn-default-color, 8%);
}

.btn-success.btn-anim.spread::before {
  background-color: @color-button;
}
.btn-success.btn-anim.spread::after {
  // 背景と枠線が違う色：枠線の色
  background-color: @color-btn-border;
  // 背景と枠線が同色：濃度調整
  & when (@color-button = @color-btn-border) {
    background-color: contrast(@color-button, lighten(@color-button, 20%), darken(@color-button, 12%), 10%);
  }
}
.btn-success.btn-anim.spread:active:hover,
.btn-success.btn-anim.spread:hover,
.btn-success.btn-anim.spread:active:focus,
.btn-success.btn-anim.spread:focus,
.btn-success.btn-anim.spread:active {
  // 背景と枠線が違う色：枠線の色
  color: contrast(@color-btn-border, rgba(0,0,0,.85), #fff);
  border-color: @color-btn-border;
  // 背景と枠線が同色：濃度調整
  & when (@color-button = @color-btn-border) {
    color: @color-btn-text;
    border-color: contrast(@color-button, lighten(@color-button, 20%), darken(@color-button, 12%), 10%);
  }
}

// クローズダウン
.btn-default.btn-anim.closedown::before {
  background-color: fade(@btn-default-color, 8%);
}

.btn-success.btn-anim.closedown::before {
  // 背景と枠線が違う色：枠線の色
  background-color: @color-btn-border;
  // 背景と枠線が同色：反転
  & when (@color-button = @color-btn-border) {
    background-color: @color-btn-text;
  }
}
.btn-success.btn-anim.closedown:active:hover,
.btn-success.btn-anim.closedown:hover,
.btn-success.btn-anim.closedown:active:focus,
.btn-success.btn-anim.closedown:focus,
.btn-success.btn-anim.closedown:active {
  // 背景と枠線が違う色：枠線の色
  color: contrast(@color-btn-border, rgba(0,0,0,.85), #fff);
  background-color: @color-button;
  border-color: @color-btn-border;
  // 背景と枠線が同色：反転
  & when (@color-button = @color-btn-border) {
    color: @color-button;
  }
}

// 3Dスクエア
.btn-default.btn-anim.dddsquare {
  box-shadow: 0 4px @btn-default-border;
}
.btn-default.btn-anim.dddsquare:hover,
.btn-default.btn-anim.dddsquare:focus {
  background-color: transparent;
  box-shadow: none;
}
.btn-default.btn-anim.dddsquare:active:hover,
.btn-default.btn-anim.dddsquare:active:focus,
.btn-default.btn-anim.dddsquare:active {
  background-color: fade(@btn-default-color, 8%);
}

.btn-success.btn-anim.dddsquare {
  // 背景と枠線が違う色：枠線の色
  box-shadow: 0 4px @color-btn-border;
  // 背景と枠線が同色：濃度調整
  & when (@color-button = @color-btn-border) {
    box-shadow: 0 4px contrast(@color-button, lighten(@color-button, 40%), darken(@color-button, 20%), 10%);
  }
}
.btn-success.btn-anim.dddsquare:hover,
.btn-success.btn-anim.dddsquare:focus {
  background: @color-button;
  border-color: @color-btn-border;
  box-shadow: none;
}
.btn-success.btn-anim.dddsquare:active:hover,
.btn-success.btn-anim.dddsquare:active:focus,
.btn-success.btn-anim.dddsquare:active {
  background: darken(@color-button, 8%);;
}


// --------------------------------------------------
// dropify

.dropify-wrapper .dropify-message {
  font-size: @font-size-base;
}