/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@import '../../styles/core/mixins';

:host {
  appearance: none;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;

  &:hover, &:focus {
    text-decoration: none;
  }

  &.full-width {
    width: 100%;
  }

  ::ng-deep el-icon {
    vertical-align: top;
  }

  &.icon-start:not(.icon-end) ::ng-deep el-icon {
    @include el-ltr(margin-right, 0.75rem);
    @include el-rtl(margin-left, 0.75rem);
  }

  &.icon-end:not(.icon-start) ::ng-deep el-icon {
    @include el-ltr(margin-left, 0.75rem);
    @include el-rtl(margin-right, 0.75rem);
  }
}

:host(.transitions) {
  @include el-component-animation(background-color, border-color, box-shadow, color);
}