@import '@nativescript/theme/core';
@import '@nativescript/theme/blue';
@import '@nativescript/theme/scss/variables/blue';


// Place any CSS rules you want to apply on both iOS and Android here.
// This is where the vast majority of your CSS code goes.

// Font icon class
.fab {
  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
  font-weight: 400;
}

.fas {
  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
  font-weight: 900;
}

.far {
  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
  font-weight: 400;
}

// Custom styles
.cars-list {
  &__item {
    padding: 0 0 8 0;
    @include colorize($background-color: background-alt-10);

    &-content {
      padding: 8 15 4 15;
      border-bottom-width: 10;
      border-bottom-color: #e4e4e4;
      @include colorize($background-color: background);
    }

    &-name,
    &-icon {
      @include colorize($contrasted-color: complementary background 30% 0%);
    }
  }
}


// Custom styles
.car-list {

  &-even,
  &-odd {
    padding: 10 15;
    margin: 0;
    border-bottom-width: const(border-width);
    @include colorize($border-color: background-alt-20);
  }

  &-odd {
    @include colorize($background-color: background-alt-10, $color: secondary);
  }

  &__value {
    width: 65;
    text-align: right;
    @include colorize($contrasted-color: complementary background 30% 10%);
  }

  TextField.placeholder-error {
    @include colorize($placeholder-color: error);
  }

  Slider {
    @include colorize($contrasted-background-color: complementary background 20% 0%,
      $contrasted-color: complementary background 20% 0%);
  }
}

.thumb {
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 25;
  font-weight: bold;

  &__add {
    background-color: transparent;
    border-radius: const(border-radius-sm);
    border-width: const(border-width);
    @include colorize($border-color: background-alt-20, $color: background-alt-20);
  }

  &__remove {
    background-color: rgba(grey, 0.5);
    @include colorize($color: background);
  }
}