/**
 * YIKES Metaboxes
 */

/* Font & Color Variables */

$white: #fff;
$black: #000;
$offwhite: #fafafa;
$lightgrey: #e9e9e9;
$lightgrey2: #dfdfdf;
$grey: #aaa;
$darkgrey: #333;
$darkgrey2: #777;
$blue: #428bca;

$title-font: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
$code-font: Consolas, Monaco, monospace;

$input-small-width: 25%;
$input-medium-width: 50%;
$input-regular-width: 100%;
$input-repeating-width: 85%;

@mixin linear-gradient($gradientLine, $colorStops...) {
  background-image: -webkit-linear-gradient($gradientLine, $colorStops);
  background-image:    -moz-linear-gradient($gradientLine, $colorStops);
  background-image:      -o-linear-gradient($gradientLine, $colorStops);
  @if length($gradientLine) == 2 {
  background-image:         linear-gradient(to #{inverse-side(nth($gradientLine, 1))} #{inverse-side(nth($gradientLine, 2))}, $colorStops);
  } @else {
  background-image:         linear-gradient(to #{inverse-side($gradientLine)}, $colorStops);
  }
}

@mixin transition($transition...) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

@mixin transition-property($properties...) {
  -webkit-transition-property: $properties;
     -moz-transition-property: $properties;
       -o-transition-property: $properties;
          transition-property: $properties;
}

/* BEGIN Metabox Styles */

.yks_mbox, table.yks_mbox, table.form-table {

  /* Global */

  td {
    border-bottom: 1px solid $lightgrey;
  }

  th {
    border-bottom: 1px solid $lightgrey;
    text-align: right;
    font-weight: 600;

    label {
      display: block;
    }
  }

  /* Gutenberg sidebar metaboxes */
  .edit-post-sidebar & {
    th, td {
      display: block;
      text-align: left;
      width: 100%;
    }

    th {
      border-bottom: 0;
      padding-bottom: 0;
      padding-top: 0.4rem;
    }

    td {
      padding: 8px 0;

      textarea, input[type="text"] {
        width: 100%;
      }

      .select2-container {
        min-width: 234px !important;
        max-width: 234px !important;
        overflow: hidden;
      }

      .meta-error {
        display: block;
        padding-top: 0.4rem;
      }
    }
  }

  p.yks_mbox_description, span.yks_mbox_description {
    color: $grey;
    font-style: italic;
    margin: 2px 0 !important;
  }

  /* Title Metabox */

  .yks_mbox_title {
    margin: 0 0 5px 0;
    padding: 5px 0 0 0;
    font: italic 24px/35px $title-font;
  }

  /* Other Metaboxes */

  input[type=text]:not(.regular-text, .small-text) {
    width: $input-regular-width;

    &.yks_textarea_source {
      font-family: $code-font;
      line-height: 16px;
    }
  }

  input {
    &.yks_txt_medium, &.yks_img_up {
      width: $input-medium-width;
    }

    &.yks_txt_small, &.yks_txt_money, &.yks_txt_number, &.yks_zip_code4,
    &.yks_zip_code5, &.yks_time_pick, &.yks_date_pick, &.yks_year_pick {
      width: $input-small-width;
    }

    &[type=text] {
      &.yks_questions {
        width: 80%;
      }
    }
  }

  .yks_zip_code_us_dash {
    margin-right: 15px;
  }

  textarea {
    &.yks_textarea_desc_value {
      margin-left: 1px;
      margin-top: 1px;
      margin-bottom: 1px;
    }
  }

  textarea.yks_textarea_desc_value.yks_repeating_input_fields_width {
    margin-left: 25px;
  }

  .yikes_radio_block {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .yks_radio_inline_label {
    padding: 2px 10px 2px 10px;

    &:first-of-type {
      padding-left: 0px;
    }
  }

  .yks_multicheck_label {
    padding-right: 1em;
    width: 18%;

    input.yks_multicheck {
      margin-right: 5px;
    }
  }

  /* File upload */

  /* Make images fit after files are uploaded */
  .img_status img, .img_status .dashicons {
    border: 1px solid $lightgrey2;
    background: $offwhite;
    display: block;
    margin-top: 10px;
    max-width: 350px !important;
    padding: 5px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }


  /* Remove image button */
  .yks_upstat {
    .img_status, .embed_status {
      position: relative;

      .yks_hide_ubutton {
        background: url(images/ico-delete.png);
        cursor: pointer;
        text-indent: -9999px;
        height: 16px;
        left: -5px;
        margin-left: 1px;
        position: absolute;
        top: -5px;
        width: 16px;
      }
    }
  }

  /* Taxonomy pickers */
  .yks_taxonomy_container, .yks_mbox-multicheck {
    margin-top: 4px;
  }

  /**
  * Colorpicker
  */

  .wp-picker-container {
    margin-top: 0;
  }

  .yks_colorpicker_select_preview {
    display: inline-block;
    height: 50px;
    width: 50px;
    float: left;
  }

  select.yks_colorpicker_select {
    width: 50%;
    margin-left: 15px;

    & + p {
      margin-left: 70px !important;
    }
  }

  /** Repeating **/
  ul.ui-sortable {
    margin-top: 4px;
  }

  .dashicons.dashicons-sort {
    padding-right: 4px;
  }

  .yks_txt_add_container, .yks_txt_medium_add_container, .yks_txt_small_add_container, .yks_textarea_add_container,
  .yks_textarea_small_add_container, .yks_textarea_desc_value_add_container, .yks_txt_desc_value_add_container, .yks_questions_add_container,
  .yks_txt_three_fields_add_container, .yks_txt_url_add_container, .yks_link_picker_add_container, .yks_txt_money_add_container,
  .yks_txt_number_add_container, .yks_textarea_code_add_container, .yks_phone_number_add_container, .yks_zip_code_add_container,
  .yks_zip_code_us_add_container, .yks_txt_time_add_container, .yks_txt_time_formatted_add_container, .yks_end_txt_time_formatted_add_container,
  .yks_txt_date_add_container, .yks_txt_date_year_add_container, .yks_txt_date_timestamp_add_container, .yks_txt_date_mysql_add_container,
  .yks_txt_datetime_timestamp_add_container, .yks_txt_datetime_mysql_add_container, .yks_select_state_providence_add_container,
  .yks_select_country_add_container, .yks_select_add_container, .yks_radio_inline_add_container, .yks_checkbox_add_container,
  .yks_multicheck_add_container, .yks_youtube_add_container, .yks_file_add_container {
    padding-left: 26px;
  }

  .ui-sortable > .ui-sortable-handle {

    input[type="text"], textarea, input[type="email"], input[type="number"] {
      width: $input-repeating-width;

      /* Text Small / Zip / Date / Time / Year */
      &.yks_txt_small, &.yks_zip_code_us.yks_zip_code5, 
      &.yks_zip_code_us.yks_zip_code4,
      &.yks_date_pick, &.yks_time_pick, &.yks_year_pick {
        width: $input-small-width;
      }

      /* Text Medium */
      &.yks_txt_medium {
        width: $input-medium-width;
      }
    }
  }

  /* Toggle Metabox */
  .yks_toggle {
    position: relative;
    margin: 0 !important;
    width: 108px !important;
    height: 20px;
    padding: 3px;
    border-radius: 18px;
    box-shadow: inset 0 -1px white,
                inset 0 1px 1px rgba(black, .05);
    cursor: pointer;
  }

  .yks_toggle-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0 !important;
  }

  .yks_toggle-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: $lightgrey;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba($black, .12),
                inset 0 0 2px rgba($black, .15);
    transition: .15s ease-out;
    transition-property: opacity background;

    &:before, &:after {
      position: absolute;
      top: 50%;
      margin-top: -.5em;
      line-height: 1;
      transition: inherit;
    }

    &:before {
      content: attr(data-off);
      right: 11px;
      color: #aaa;
      text-shadow: 0 1px rgba($white, .5);
    }

    &:after {
      content: attr(data-on);
      left: 11px;
      color: white;
      text-shadow: 0 1px rgba($white, .2);
      opacity: 0;
    }
  }

  .yks_toggle-input:checked ~ .yks_toggle-label {
    background: #47a8d8;
    box-shadow: inset 0 1px 2px rgba($black, .15),
                inset 0 0 3px rgba($black, .2);

    &:before { opacity: 0; }
    &:after { opacity: 1; }
  }

  .yks_toggle-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba($black, .2);
    @include linear-gradient(top, $white 40%, #f0f0f0);
    transition: left .15s ease-out;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -6px 0 0 -6px;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      box-shadow: inset 0 1px rgba(black, .02);
      @include linear-gradient(top, $lightgrey, $white);
    }
  }

  .yks_toggle-input:checked ~ .yks_toggle-handle {
    left: 91px;
    box-shadow: -1px 1px 5px rgba(black, .2);
  }

  /**
  * Hours of Operation metabox
  */

  .yks_hours_of_operation_day_container {
    font-weight: 500;
    font-size: 12px;

    .yks_hours_of_operation_day_label, .yks_hours_of_operation {
      display: inline-block;
      padding-right: 6px;
      text-align: right;
      width: 80px;
    }

    .yks_hours_of_operation:nth-child(3) {
      margin-left: 15px;
    }
  }
}

/* END Regular Metabox Styles */


/* Grouped Metaboxes  */

/* Group Tab bar */

ul.group-tabs-list {
  list-style-type: none;
  margin: 0;
  color: $darkgrey;
  border-bottom: none;
  padding: 5px 5px 0 5px;
}

.group-tabs {
  background-color: $blue;
  border-color: $blue;
  border-bottom: solid 1px $blue;
  padding: 0px 5px 0 5px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-bottom: 20px;
  display: block;
}

.group-tabs-list-container {
  border-bottom: 1px solid $lightgrey2;
  background-color: $offwhite;
}

.group-tabs-list {
  margin-bottom: 0px;
  display: table;
}

li.group-tabs-list-item {
  float: left;
  margin-bottom: -1px;
  position: relative;
  display: block;
}

li.group-tabs-list-item a:hover {
  color: $darkgrey;
  background-color: $lightgrey2;
  border-color: transparent;
}

li.group-tabs-list-item a {
  position: relative;
  display: block;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: $darkgrey2;
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

li.group-tabs-list-item.active a {
  border: 1px solid $lightgrey2;
  background-color: $white;
  color: $darkgrey;
  border-bottom: 1px solid $white;
  border-radius: 4px 4px 0 0;
}

/* Group fields */

.group.yks_mbox {
  margin-bottom: 20px;
  background-color: $white;
  border: solid 1px $lightgrey2;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  padding-bottom: 20px;

  .yks-mbox-group {
    padding-left: 15px;
    padding-right: 15px;

    hr {
      display: none;
    }

    /* Group field labels */
    label {
      width: 99%;  
      display: inline-block;
      margin-top: .5rem;
      font-weight: bold;
    }

    /* Most text/textarea/number/email fields */
    input[type="text"], textarea, input[type="number"], input[type="email"] {
      width: $input-regular-width;
      margin-top: 10px;

      /* Text Small / Zip / Date / Time / Year */
      &.yks_txt_small, &.yks_zip_code_us.yks_zip_code5, &.yks_zip_code_us.yks_zip_code4,
      &.yks_date_pick, &.yks_time_pick, &.yks_year_pick {
        width: $input-small-width;
      }

      /* Text Medium */
      &.yks_txt_medium {
        width: $input-medium-width;
      }

      /* Allow the 'required' checkbox for questions to sit next to the field */
      &.yks_questions {
        width: 97%;
      }

      /* The color picker */
      &.wp-color-picker{
        width: 84px;
        margin-top: 0px;
      }
    }

    /* Select fields */
    select {
      margin-top: 10px;
    }

    /* Radio / Checkbox fields */
    input[type="radio"], input[type="checkbox"] {
       margin-left: 2px;
       margin-right: 8px;
    }

    /* Descriptions (block) */
    .yks_mbox_description_block {
      color: #666;
      margin-top: 5px;
    }

    /* Link picker - remove margin so custom URL field lines up correctly */
    .yks_link_picker.yks_link_picker_dropdown {
      margin-top: 0px;
    }

    /* Link Picker Custom URL input field */
    .yks_link_picker.yks_link_picker_input {
      width: $input-medium-width;
    }

    /* Center the dash between the times for Hours of Operation field */
    .yks_time_pick.yks_hours_of_operation {
      margin-right: 10px;
    }

    /* Force the "Closed" text label to inline for hours of operation field */
    /* Force the post type multi check label to inline */
    /* Force the multi check label to inline */
    /* Force the taxonomy checkbox labels to inline */
    .yks_hours_of_operation_closed_override_label, .yks_multicheck_post_type_container label, .yks_mbox-multicheck label, .yks_taxonomy_container label {
      display: inline !important;
    }

    /* Remove the top margin from checkbox / radio buttons  */
    .yks_multicheck_post_type, .yks_taxonomy_radio, .yks_taxonomy_multicheck {
      margin-top: 0px !important;
    }

    /* Zip code field dash */
    .yks_zip_code_us_dash {
      margin-left: 4px;
      margin-right: 4px;
    }

    /* Force inline radio buttons inline */
    label.yks_radio_inline_label {
      display: inline;
      margin-right: 6px;
      margin-left: 6px
    }

    /* Force file input field width to allow "Upload File" button to sit next to it */
    .yks_file.yks_img_up {
      width: 90%;
    }

    /* Add a margin to the "Upload File" button so it sits next to the input field */
    .yks_img_up_button {
      margin-top: 10px;
    }

    /* Force money sign to sit next to the input field */
    .yks_txt_money_dollar_sign {
      margin-left: 1%;
    }
  }
}

/* End of Groups */


/* Repeating Fields */

/* Adjust the repeating field dashicons */
.dashicons-dismiss, .dashicons-sort {
  line-height: 2.3;
}

.ui-sortable .ui-sortable-handle {

  /* The majority of text/textarea/email/number fields */
  input[type="text"], textarea, input[type="email"], input[type="number"] {
    width: $input-repeating-width;

    /* Text Small / Zip / Date / Time / Year */
    &.yks_txt_small, &.yks_zip_code_us.yks_zip_code5,
    &.yks_zip_code_us.yks_zip_code4,
    &.yks_date_pick, &.yks_time_pick, &.yks_year_pick {
        width: $input-small-width;
    }

    /* Text Medium */
    &.yks_txt_medium {
      width: $input-medium-width;
    }
    }

  /* Link Picker Custom URL input field */
  .yks_link_picker.yks_link_picker_input.yks_link_picker_input_repeating {
    width: $input-medium-width;
  }

  /* Zip code field dash */ 
  .yks_zip_code_us_dash {
    margin-left: 4px;
    margin-right: 4px;
  }

  /* Adjust the file upload button */
  .yks_img_up_button {
    margin-top: 10px;   
  }

}

/* Radio Fields dashicon */
.yks_radio_container.ui-sortable .ui-sortable-handle .dashicons {
  margin-bottom: 10px;
}

/* Force inline radio buttons' label to inline */
.yks_radio_inline_container.ui-sortable .ui-sortable-handle .yks_radio_inline_label {
  display: inline;
  margin-right: 15px;
}

/* Adjust the repeating dashicons for radio inline fields */
.yks_radio_inline_container.ui-sortable .ui-sortable-handle .dashicons {
  line-height: 1;
}

/* Adjust the repeating dashicons for checkbox fields */
.yks_checkbox_container.ui-sortable .ui-sortable-handle .dashicons {
  line-height: 1.5;
}

/* End Repeating Fields */

/* Responsive */

@media (max-width: 1400px) {

  table.yks_mbox select {
    max-width: 600px;
  }
}

@media (max-width: 1200px) {

  table.yks_mbox {
    input[type="text"], textarea, select, .wp-editor-wrap {
      max-width: 400px;
    }
  }
}

@media (max-width: 1000px) {

  table.yks_mbox {
    input[type="text"], textarea, select, .wp-editor-wrap {
      max-width: 300px;
    }
  }
}

@media (max-width: 800px) {

  table.yks_mbox {
    input[type="text"], textarea, select, .wp-editor-wrap {
      max-width: 500px;
    }
  }
}


@media (max-width: 700px) {
  table.yks_mbox th {
    border-bottom: 0;
    text-align: left;
    font-weight: bold;
    width: 100% !important;
  }

  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="text"].yks_txt_small,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="text"].yks_zip_code_us.yks_zip_code5,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="text"].yks_zip_code_us.yks_zip_code4,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="text"].yks_date_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="text"].yks_time_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="text"].yks_year_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle textarea.yks_txt_small,
  table.yks_mbox .ui-sortable > .ui-sortable-handle textarea.yks_zip_code_us.yks_zip_code5,
  table.yks_mbox .ui-sortable > .ui-sortable-handle textarea.yks_zip_code_us.yks_zip_code4,
  table.yks_mbox .ui-sortable > .ui-sortable-handle textarea.yks_date_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle textarea.yks_time_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle textarea.yks_year_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="email"].yks_txt_small,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="email"].yks_zip_code_us.yks_zip_code5,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="email"].yks_zip_code_us.yks_zip_code4,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="email"].yks_date_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="email"].yks_time_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="email"].yks_year_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="number"].yks_txt_small,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="number"].yks_zip_code_us.yks_zip_code5,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="number"].yks_zip_code_us.yks_zip_code4,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="number"].yks_date_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="number"].yks_time_pick,
  table.yks_mbox .ui-sortable > .ui-sortable-handle input[type="number"].yks_year_pick {
    width: 100%;
  }

  table.yks_mbox {
    .yks_colorpicker_select_preview {
      margin-right: 8px;
    }
    .yks_hours_of_operation_day_container {
        input[type="text"] {
        display: inline-block;
        }
    }
  }
}