@import '../../../@theme/styles/themes';

@include nb-install-component() {

  nb-card {
    background-image: nb-theme(radial-gradient);
  }

  nb-tabset {
    display: flex;
    flex-direction: column;
    height: 100%;

    /deep/ ul {
      border: none;
    }
  }

  nb-tab.content-active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 100%;
  }

  .slider-container {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }

  ngx-temperature-dragger {
    margin-top: -1.5rem;
    width: 80%;
  }

  .slider-value-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .value {
      position: relative;
      color: nb-theme(color-fg-heading);
      font-family: nb-theme(font-secondary);
      font-size: 4rem;
      font-weight: nb-theme(font-weight-bolder);

      &.temperature::before {
        position: absolute;
        content: '°';
        top: 0;
        right: -1.25rem;
      }

      &.humidity::before {
        position: absolute;
        content: '%';
        bottom: 0.5rem;
        right: -2.5rem;
        color: nb-theme(color-fg);
        font-size: 2.5rem;
        font-weight: nb-theme(font-weight-light);
      }
    }

    .desc {
      color: nb-theme(color-fg);
      font-weight: nb-theme(font-weight-light);
    }

    &.off {
      .value {
        color: nb-theme(color-fg);
        letter-spacing: 0.25rem;
        padding-left: 0.5rem;

        &::before {
          display: none;
        }
      }

      .desc {
        display: none;
      }
    }
  }

  .btn-group {
    padding: 1.25rem;
  }

  .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    border-color: nb-theme(form-control-border-color);
    height: 4.5rem;
    padding: 0;
    margin-bottom: 0;

    &.active {
      border-color: nb-theme(color-fg-highlight);
      color: nb-theme(color-success);
    }

    i {
      font-size: 2rem;
      line-height: 1;
    }
    .ion-ios-snowy {
      font-size: 2.5rem;
    }
    .ion-ios-sunny-outline {
      font-size: 2.5rem;
    }
    .ion-ios-flame-outline {
      font-size: 2.25rem;
    }
    .ion-ios-loop {
      font-size: 1.75rem;
    }
  }

  @include nb-for-theme(cosmic) {
    .btn-icon {
      border-color: nb-theme(form-control-border-color);

      &.active {
        border-color: nb-theme(color-fg-highlight);
        box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
        background-color: rgba(nb-theme(color-fg-highlight), 0.25);
      }
    }
  }
}