/* .smart-power-button */
.smart-power-button {
  padding: 0px;
  border-radius: 100%;
  display: inline-block;
  width: var(--smart-power-button-default-width);
  height: var(--smart-power-button-default-width);

  .smart-input {
    border-radius: 100%;
    outline: none;
    width: 100%;
    height: 100%;
    min-width: var(--smart-power-button-default-width);
    min-height: var(--smart-power-button-default-width);
    background-color: var(--smart-background);
    border-style: solid;
    box-sizing: border-box;
    border-width: var(--smart-border-width);
    border-color: var(--smart-border);
    display: block;
    position: relative;
    overflow: hidden;

    &:after {
      content: var(--smart-icon-power);
      width: 100%;
      height: 100%;
      font-family: "smart-icons";
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      text-decoration: inherit;
      font-variant: normal;
      text-transform: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
  }

  .smart-container {
    cursor: pointer;
    height: 100%;
    position: relative;
    display: flex;
  }

  .smart-animation {
    pointer-events: none;
  }

  &[focus] {
    outline: none;

    .smart-input {
      outline: none;
      border: var(--smart-border-width) solid var(--smart-ui-state-border-focus);
      background: var(--smart-ui-state-focus);
      color: var(--smart-ui-state-color-focus);
    }
  }

  &:hover {
    .smart-input {
      border: var(--smart-border-width) solid var(--smart-ui-state-border-hover);
      background: var(--smart-ui-state-hover);
      color: var(--smart-ui-state-color-hover);
      transition: background-color 100ms linear;
    }
  }

  &:active {
    .smart-input {
      border: var(--smart-border-width) solid var(--smart-ui-state-border-active);
      background: var(--smart-ui-state-active);
      color: var(--smart-ui-state-color-active);
      transition: background-color 100ms linear;
    }
  }

  &[disabled] {
    .smart-container {
      cursor: initial;
    }
  }

  &[checked] {
    .smart-input {
      background-color: var(--smart-primary);
      color: var(--smart-primary);

      &:after {
        color: white;
      }
    }
  }

  &[readonly]:active,
  &[readonly].active,
  &[readonly]:hover {
    .smart-input {
      color: initial;
      border: var(--smart-border-width) solid var(--smart-button-border);
      background: var(--smart-button-background);
      transition: none;
    }
  }
}

smart-power-button {
  &.active {
    .smart-input {
      border: var(--smart-border-width) solid var(--smart-ui-state-border-active);
      background: var(--smart-ui-state-active);
      color: var(--smart-ui-state-color-active);
      transition: background-color 100ms linear;
    }
  }

  &.raised {
    box-shadow: var(--smart-elevation-2);
  }
}
@import 'rtl/_powerbutton';