.ias-tile {
  background-color: $tile-bg-color;
  border: $tile-border-width solid transparent;
  border-radius: $border-radius;
  box-sizing: content-box;
  color: $tile-text-color;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  font-size: $tile-description-font-size;
  line-height: $tile-description-line-height;
  padding: $tile-padding;
  position: relative;
  text-align: left;

  > .ias-actions {
    position: absolute;
    top: 0;
    right: 0;
  }

  > .ias-avatar,
  > .ias-icon {
    flex: none;
  }

  > .ias-avatar {
    height: $tile-avatar-size;
    width: $tile-avatar-size;
  }

  > .ias-icon {
    font-size: $tile-avatar-size;
  }

  > .ias-tile-content {
    overflow: hidden;

    > h3,
    > p {
      margin: 0;
      padding: 0;
    }

    > p {
      font-size: inherit;
      line-height: inherit;
    }
  }

  a {
    @include focus-hover-background($body-bg-color);
  }

  // STATES
  &:focus,
  &:hover {
    background-color: $tile-bg-color-hover;
    border-color: $button-border-color-hover;
    color: $tile-text-color;
    outline: none;
  }

  // SIZES
  &.ias-tiny {
    display: inline-flex;

    > .ias-tile-content {
      display: none;
    }
  }

  &.ias-small {
    max-width: $tile-width-small;
    width: $tile-width-small;

    > .ias-avatar,
    > .ias-icon {
      margin-right: $tile-padding;
    }

    > .ias-tile-content {
      > :not(h3) {
        display: none;
      }

      > h3 {
        @include single-line;
        font-size: $tile-title-font-size-small;
        line-height: $tile-avatar-size;
      }
    }
  }

  &.ias-medium {
    width: $tile-width-medium;

    > .ias-avatar,
    > .ias-icon {
      margin-right: $tile-padding;
    }

    > .ias-tile-content {
      > h3 {
        font-size: $tile-title-font-size-medium;
        margin-bottom: $tile-title-margin-bottom-medium;
      }
    }
  }

  &.ias-large {
    align-items: center;
    flex-flow: column nowrap;
    max-width: $tile-width-large;
    text-align: center;
    width: $tile-width-large;

    > .ias-avatar,
    > .ias-icon {
      margin-bottom: $tile-padding;
    }

    > .ias-avatar {
      height: $tile-avatar-size-large;
      width: $tile-avatar-size-large;
    }

    > .ias-icon {
      font-size: $tile-avatar-size-large;
    }

    > .ias-tile-content {
      > h3 {
        font-size: $tile-title-font-size-large;
        margin-bottom: $tile-title-margin-bottom-large;
      }
    }
  }
}

[dir="rtl"] {
  .ias-tile {
    text-align: right;

    > .ias-actions {
      left: 0;
      right: auto;
    }

    &.ias-small,
    &.ias-medium {
      > .ias-avatar,
      > .ias-icon {
        margin-left: $tile-padding;
        margin-right: 0;
      }
    }


  }
}