$image-width: 200px;
$image-height: 150px;
/**
 * Fields
 */

.ola-field {
  padding-bottom: $field-bottom-padding;
}

.ola-field-img {
  display: block;
  padding: 0;
  margin-bottom: 1rem;
  object-fit: cover;
}

  /**
   * Caption
   */
  .ola-field-img-caption {
    font-style: italic;
    font-size: 14px;
    padding: 8px;
    text-align: left;
  }

  /**
   * Image link
   */
  .ola-img-link {
    cursor: pointer;
  }

/**
 * Image
 */
.ola-img {
  max-height: inherit;
  max-width: 100%;
  vertical-align: top;
}

/**
 * Background images
 */
.ola-img-bg {
  height: $image-height;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.ola-field-component-label {
  color: $base-grey-color;
  padding-bottom: 0.25rem;
}

/* Inline label */
.ola-field-label-inline {
  display: flex;
  align-items: baseline;
  .ola-field-component-label {
    padding-right: 4px;
    padding-bottom: 0;
  }
}

/**
 * Field groups
 */

.ola-fg-horizontal {
  @include media (tablet) {
    @include flexbox;

    > .ola-fg, > .ola-field {
      padding-right: 1em;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }

    > .ola-fg-image {
      padding-right: 0;

      > .ola-field-img {
        margin-right: 1rem;
      }
    }
  }
}

  /**
   * IE 10 flexbox bug causes overflow of content
   */
  .ola-fg {
    -ms-flex-positive: 0;
    -ms-flex-negative: 1;
  }

/**
 * Content
 */
.ola-fg-content {
  flex: 1;
}

/**
 * Table inside snippet
 */

.ola-snippet {
  table {
    width: 100%;
    text-align: left;
    font-size: 14px;
    margin: 0 0 8px 0;
  }

  th, td {
    padding: 6px 12px;
    border: 1px #ccc solid;
  }

  th {
    font-weight: 500;
  }

  thead th {
    background: #eee;
  }
}

/* Title */
.ola-field-title {
  margin: 0;
  padding: 0 0 $field-title-bottom-padding 0;
  font-weight: normal;

  .ola-field {
    padding: 0;
    margin: 0;
  }

  > a {
    text-decoration: none;
  }
}

/* URL */
.ola-field-url {
  font-size: 13px;
  color: $base-grey-color;
  display: block;
  padding-bottom: 0;
  text-decoration: none;

  @extend %nobreak;
}


/* Distance */
.ola-field-distance {
  display: inline-block;
  color: $base-grey-color;
  &:before {
    content: ' (';
  }
  &:after {
    content: ') '
  }
}

/* Button */
.ola-field-button {

}



/**
 * Small fields
 */
.ola-field-person,
.ola-field-date,
.ola-field-directions {
  // font-size: 0.875rem;
}

/* Add comma between each person */
.ola-btn-person + .ola-btn-person:before {
  content: ', ';
}

/**
 * Text field
 */

.ola-field-text {
  p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}


/**
 * Fake checkbox
 */
.ola-faux-checkbox {
  align-items: flex-start;
  .ola-checkbox-element {
    position: absolute;
    opacity: 0;
  }
}
/**
 * Checkbox
 */
.ola-checkbox-icon {
  width: 18px;
  height: 18px;
  border: 2px #7E898E solid;
  border-radius: 2px;
  position: relative;
  margin-top: .25rem;
}

  /**
   * Checked checkbox
   */
  .ola-faux-checkbox-checked .ola-checkbox-icon:after {
    content: " ";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /**
   * Disabled
   */
  .ola-faux-checkbox-disabled .ola-checkbox-icon {
    border-color: #cbd0d1;
  }

/**
 * Break long lines of ola-field-value
 */
.ola-field-value {
  @extend %nobreak;
}