@import 'theme';

$background: #ffffff;

.root {
  -fx-background-color: $background;
  -fx-text-fill: black;
}

.text-field {
  -fx-cursor: text;
}

.card {
  -fx-background-color: $background;
  -fx-background-radius: 3px;
  -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.5), 5, 0, 0, 2);

  .card-header {
    .card-title {
      -fx-font-size: 1.2em;
      -fx-font-weight: 600;
    }

    .card-subtitle {
      -fx-text-fill: rgba(0, 0, 0, 0.6);
    }
  }

  .card-content {
    -fx-text-fill: rgba(0, 0, 0, 0.6);
  }
}

.button {
  -fx-font-size: 1.1em;
  -fx-padding: 9px 16px 8px 16px;
  -fx-text-fill: white;
  -fx-background-radius: 4px;

  &.primary {
    -fx-background-color: map-get($primary-theme, 700);
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.3), 3, 0, 0, 2);

    &:pressed {
      -fx-background-color: map-get($primary-theme, 400);
      -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.5), 5, 0, 0, 2);
    }
  }
}

.button-icon {
  -fx-padding: 5px;
  -fx-background-radius: 24px;
  -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.5), 5, 0, -1, 2);

  &.primary {
    -fx-background-color: map-get($primary-theme, 700);
  }

  &.accent {
    -fx-background-color: map-get($accent-theme, 700);
  }
}
