@import '../../themes/default/elements/image.variables';

@if $use-image {
  /*******************************
  //@-         Image
  *******************************/
  
  .ui.image {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    background-color: $image-placeholder-color;
  }
  
  img.ui.image {
    display: block;
  }
  
  .ui.image svg,
  .ui.image img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  
  /*******************************
              States
  *******************************/
  
  .ui.hidden.images,
  .ui.ui.hidden.image {
    display: none;
  }
  .ui.hidden.transition.images,
  .ui.hidden.transition.image {
    display: block;
    visibility: hidden;
  }
  .ui.images > .hidden.transition {
    display: inline-block;
    visibility: hidden;
  }
  
  
  .ui.disabled.images,
  .ui.disabled.image {
    cursor: default;
    opacity: $disabled-opacity;
  }
  
  
  /*******************************
            Variations
  *******************************/
  
  
  /*--------------
       Inline
  ---------------*/
  
  .ui.inline.image,
  .ui.inline.image svg,
  .ui.inline.image img {
    display: inline-block;
  }
  
  /*------------------
    Vertical Aligned
  -------------------*/
  
  .ui.top.aligned.images .image,
  .ui.top.aligned.image,
  .ui.top.aligned.image svg,
  .ui.top.aligned.image img {
    display: inline-block;
    vertical-align: top;
  }
  .ui.middle.aligned.images .image,
  .ui.middle.aligned.image,
  .ui.middle.aligned.image svg,
  .ui.middle.aligned.image img {
    display: inline-block;
    vertical-align: middle;
  }
  .ui.bottom.aligned.images .image,
  .ui.bottom.aligned.image,
  .ui.bottom.aligned.image svg,
  .ui.bottom.aligned.image img {
    display: inline-block;
    vertical-align: bottom;
  }
  
  /*--------------
       Rounded
  ---------------*/
  
  .ui.rounded.images .image,
  .ui.rounded.image,
  .ui.rounded.images .image > *,
  .ui.rounded.image > * {
    border-radius: $image-rounded-border-radius;
  }
  
  /*--------------
      Bordered
  ---------------*/
  
  .ui.bordered.images .image,
  .ui.bordered.images img,
  .ui.bordered.images svg,
  .ui.bordered.image img,
  .ui.bordered.image svg,
  img.ui.bordered.image {
    border: $image-border;
  }
  
  /*--------------
      Circular
  ---------------*/
  
  .ui.circular.images,
  .ui.circular.image {
    overflow: hidden;
  }
  
  .ui.circular.images .image,
  .ui.circular.image,
  .ui.circular.images .image > *,
  .ui.circular.image > * {
    -webkit-border-radius: $circular-radius;
    -moz-border-radius: $circular-radius;
    border-radius: $circular-radius;
  }
  
  /*--------------
       Fluid
  ---------------*/
  
  .ui.fluid.images,
  .ui.fluid.image,
  .ui.fluid.images img,
  .ui.fluid.images svg,
  .ui.fluid.image svg,
  .ui.fluid.image img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  
  /*--------------
       Avatar
  ---------------*/
  
  .ui.avatar.images .image,
  .ui.avatar.images img,
  .ui.avatar.images svg,
  .ui.avatar.image img,
  .ui.avatar.image svg,
  .ui.avatar.image {
    margin-right: $image-avatar-margin;
  
    display: inline-block;
    width: $image-avatar-size;
    height: $image-avatar-size;
  
    -webkit-border-radius: $circular-radius;
    -moz-border-radius: $circular-radius;
    border-radius: $circular-radius;
  }
  
  /*-------------------
         Spaced
  --------------------*/
  
  .ui.spaced.image {
    display: inline-block !important;
    margin-left: $image-spaced-distance;
    margin-right: $image-spaced-distance;
  }
  
  .ui[class*="left spaced"].image {
    margin-left: $image-spaced-distance;
    margin-right: 0;
  }
  
  .ui[class*="right spaced"].image {
    margin-left: 0;
    margin-right: $image-spaced-distance;
  }
  
  /*-------------------
         Floated
  --------------------*/
  
  .ui.floated.image,
  .ui.floated.images {
    float: left;
    margin-right: $image-floated-horizontal-margin;
    margin-bottom: $image-floated-vertical-margin;
  }
  .ui.right.floated.images,
  .ui.right.floated.image {
    float: right;
    margin-right: 0;
    margin-bottom: $image-floated-vertical-margin;
    margin-left: $image-floated-horizontal-margin;
  }
  
  .ui.floated.images:last-child,
  .ui.floated.image:last-child {
    margin-bottom: 0;
  }
  
  
  .ui.centered.images,
  .ui.centered.image {
    margin-left: auto;
    margin-right: auto;
  }
  
  /*--------------
       Sizes
  ---------------*/
  
  .ui.mini.images .image,
  .ui.mini.images img,
  .ui.mini.images svg,
  .ui.mini.image {
    width: $image-mini-width;
    height: auto;
    font-size: $mini;
  }
  .ui.tiny.images .image,
  .ui.tiny.images img,
  .ui.tiny.images svg,
  .ui.tiny.image {
    width: $image-tiny-width;
    height: auto;
    font-size: $tiny;
  }
  .ui.small.images .image,
  .ui.small.images img,
  .ui.small.images svg,
  .ui.small.image {
    width: $image-small-width;
    height: auto;
    font-size: $small;
  }
  .ui.medium.images .image,
  .ui.medium.images img,
  .ui.medium.images svg,
  .ui.medium.image {
    width: $image-medium-width;
    height: auto;
    font-size: $medium;
  }
  .ui.large.images .image,
  .ui.large.images img,
  .ui.large.images svg,
  .ui.large.image {
    width: $image-large-width;
    height: auto;
    font-size: $large;
  }
  .ui.big.images .image,
  .ui.big.images img,
  .ui.big.images svg,
  .ui.big.image {
    width: $image-big-width;
    height: auto;
    font-size: $big;
  }
  .ui.huge.images .image,
  .ui.huge.images img,
  .ui.huge.images svg,
  .ui.huge.image {
    width: $image-huge-width;
    height: auto;
    font-size: $huge;
  }
  .ui.massive.images .image,
  .ui.massive.images img,
  .ui.massive.images svg,
  .ui.massive.image {
    width: $image-massive-width;
    height: auto;
    font-size: $massive;
  }
  
  
  /*******************************
                Groups
  *******************************/
  
  .ui.images {
    font-size: 0;
    margin: 0 (-$image-horizontal-margin) 0;
  }
  
  .ui.images .image,
  .ui.images > img,
  .ui.images > svg {
    display: inline-block;
    margin: 0 $image-horizontal-margin $image-vertical-margin;
  }
}

@import '../../themes/default/elements/image.style';