/**
* Site-wide customizations to form elements
*/

// make .submit act the same as a .button
.submit, .LJ_PollSubmit, input[type="submit"] {
  @include button-base;
  @include button-size;
  @include button-style;

  @include single-transition(background-color);

  &.secondary { @include button-style($bg:$secondary-button-bg-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
  &.large  { @include button-size($padding:$button-lrg); }
  &.small  { @include button-size($padding:$button-sml); }
  &.tiny   { @include button-size($padding:$button-tny); }
  &.expand { @include button-size($full-width:true); }
  &.left-align  { text-align: left; text-indent: rem-calc(12); }
  &.right-align { text-align: right; padding-right: rem-calc(12); }

  &.radius { @include button-style($bg:false, $radius:true); }
  &.round  { @include button-style($bg:false, $radius:$button-round); }
  &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
    &.secondary { @include button-style($bg:$secondary-button-bg-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
    &.success { @include button-style($bg:$success-button-bg-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
    &.alert { @include button-style($bg:$alert-button-bg-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
    &.warning { @include button-style($bg:$warning-button-bg-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
    &.info { @include button-style($bg:$info-button-bg-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
  }

  @media #{$medium-up} {
    @include button-base($style:false, $display:inline-block);
    @include button-size($padding:false, $full-width:false);
  }
}

// add the userhead in front of .user-textbox, etc
input.journaltype-textbox {
  font-weight: bold;
  color: $anchor-font-color;
}
@each $journaltype in user, community, feed, openid {
    input.#{$journaltype}-textbox, input.#{$journaltype}-textbox:focus {
        background: url(/img/silk/identity/#{$journaltype}.png) 5px 50% no-repeat $input-bg-color;
        padding-left: 5px + 16px + 5px !important;
    }
}

.form-hint {
  display: block;
  margin-top: -($form-spacing);
  margin-bottom: $form-spacing;
  font-size: emCalc(12px);
}

legend {
  color: $header-font-color;
}

fieldset {
    border-width: 0;
    border-top-width: 1px;
}

.panel {
  fieldset {
    border: none;
  }

  .button.secondary, button.secondary {
    @include button-style($bg: lighten( $secondary-color, 5% ));
    box-shadow: 0 0 2px 2px $border-color;
  }
}

.focus {
    transition: box-shadow $glowing-effect-fade-time, border-color $glowing-effect-fade-time ease-in-out;

    box-shadow: 0 0 5px $glowing-effect-color;
    border-color: $glowing-effect-color;
}

label.hidden {
  @include element-invisible();
}

/**
* Helper classes to make inputs/selects embedable in a block of text
* Also applies these styles to the authas form by default.
*/

input.inline, select.inline {
  width: auto;
  margin-bottom: 0px;
}

select.inline {
  padding-right: 1.5em;
}

select#authas {
  width: auto;
  padding-right: 1.5em;
  margin-bottom: 0px;
}

@import "components/expand-for-mobile";